<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/dynamic-markup-insertion.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:53 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=webappapis.html>← 8 Web application APIs</a> — <a href=index.html>Table of Contents</a> — <a href=timers-and-user-prompts.html>8.6 Timers →</a></nav><ol class=toc><li id=toc-webappapis><ol><li><a href=dynamic-markup-insertion.html#dynamic-markup-insertion><span class=secno>8.4</span> Dynamic markup insertion</a><ol><li><a href=dynamic-markup-insertion.html#opening-the-input-stream><span class=secno>8.4.1</span> Opening the input stream</a><li><a href=dynamic-markup-insertion.html#closing-the-input-stream><span class=secno>8.4.2</span> Closing the input stream</a><li><a href=dynamic-markup-insertion.html#document.write()><span class=secno>8.4.3</span> <code>document.write()</code></a><li><a href=dynamic-markup-insertion.html#document.writeln()><span class=secno>8.4.4</span> <code>document.writeln()</code></a></ol><li><a href=dynamic-markup-insertion.html#dom-parsing-and-serialization><span class=secno>8.5</span> DOM parsing and serialization APIs</a><ol><li><a href=dynamic-markup-insertion.html#the-domparser-interface><span class=secno>8.5.1</span> The <code>DOMParser</code> interface</a><li><a href=dynamic-markup-insertion.html#unsafe-html-parsing-methods><span class=secno>8.5.2</span> Unsafe HTML parsing methods</a><li><a href=dynamic-markup-insertion.html#html-serialization-methods><span class=secno>8.5.3</span> HTML serialization methods</a><li><a href=dynamic-markup-insertion.html#the-innerhtml-property><span class=secno>8.5.4</span> The <code>innerHTML</code> property</a><li><a href=dynamic-markup-insertion.html#the-outerhtml-property><span class=secno>8.5.5</span> The <code>outerHTML</code> property</a><li><a href=dynamic-markup-insertion.html#the-insertadjacenthtml()-method><span class=secno>8.5.6</span> The <code>insertAdjacentHTML()</code> method</a><li><a href=dynamic-markup-insertion.html#the-createcontextualfragment()-method><span class=secno>8.5.7</span> The <code>createContextualFragment()</code>
  method</a><li><a href=dynamic-markup-insertion.html#the-xmlserializer-interface><span class=secno>8.5.8</span> The <code>XMLSerializer</code> interface</a></ol></ol></ol><h3 id=dynamic-markup-insertion><span class=secno>8.4</span> <dfn>Dynamic markup insertion</dfn><a href=#dynamic-markup-insertion class=self-link></a></h3>

  <p class=note>APIs for dynamically inserting markup into the document interact with the parser,
  and thus their behavior varies depending on whether they are used with <a id=dynamic-markup-insertion:html-documents href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML
  documents</a> (and the <a id=dynamic-markup-insertion:html-parser href=parsing.html#html-parser>HTML parser</a>) or <a id=dynamic-markup-insertion:xml-documents href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a> (and the
  <a id=dynamic-markup-insertion:xml-parser href=xhtml.html#xml-parser>XML parser</a>).</p>

  

  <p><code id=dynamic-markup-insertion:document><a href=dom.html#document>Document</a></code> objects have a <dfn id=throw-on-dynamic-markup-insertion-counter>throw-on-dynamic-markup-insertion counter</dfn>,
  which is used in conjunction with the <a id=dynamic-markup-insertion:create-an-element-for-the-token href=parsing.html#create-an-element-for-the-token>create an element for the token</a> algorithm to
  prevent <a href=custom-elements.html#custom-element-constructor id=dynamic-markup-insertion:custom-element-constructor>custom element constructors</a> from being
  able to use <code id=dynamic-markup-insertion:dom-document-open><a href=#dom-document-open>document.open()</a></code>, <code id=dynamic-markup-insertion:dom-document-close><a href=#dom-document-close>document.close()</a></code>, and <code id=dynamic-markup-insertion:dom-document-write><a href=#dom-document-write>document.write()</a></code> when they are invoked by the parser.
  Initially, the counter must be set to zero.</p>

  



  <h4 id=opening-the-input-stream><span class=secno>8.4.1</span> Opening the input stream<a href=#opening-the-input-stream class=self-link></a></h4>

  <dl class=domintro><dt><code><var>document</var> = <var>document</var>.<a href=#dom-document-open id=dom-document-open-dev>open</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/open title="The Document.open() method opens a document for writing.">Document/open</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>11+</span></span><span class="chrome yes"><span>Chrome</span><span>64+</span></span><hr><span class="opera yes"><span>Opera</span><span>51+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>4+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>47+</span></span></div></div></div><dd>
    <p>Causes the <code id=opening-the-input-stream:document><a href=dom.html#document>Document</a></code> to be replaced in-place, as if it was a new
    <code id=opening-the-input-stream:document-2><a href=dom.html#document>Document</a></code> object, but reusing the previous object, which is then returned.</p>

    <p>The resulting <code id=opening-the-input-stream:document-3><a href=dom.html#document>Document</a></code> has an HTML parser associated with it, which can be given
    data to parse using <code id=opening-the-input-stream:dom-document-write><a href=#dom-document-write>document.write()</a></code>.</p>

    <p>The method has no effect if the <code id=opening-the-input-stream:document-4><a href=dom.html#document>Document</a></code> is still being parsed.</p>

    <p>Throws an <a id=opening-the-input-stream:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=opening-the-input-stream:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the
    <code id=opening-the-input-stream:document-5><a href=dom.html#document>Document</a></code> is an <a href=https://dom.spec.whatwg.org/#xml-document id=opening-the-input-stream:xml-documents data-x-internal=xml-documents>XML document</a>.</p>

    <p>Throws an <a id=opening-the-input-stream:invalidstateerror-2 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=opening-the-input-stream:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the
    parser is currently executing a <a id=opening-the-input-stream:custom-element-constructor href=custom-elements.html#custom-element-constructor>custom element constructor</a>.</p>
   <dt><code><var>window</var> = <var>document</var>.<a href=#dom-document-open-window id=opening-the-input-stream:dom-document-open-window>open</a>(<var>url</var>, <var>name</var>, <var>features</var>)</code><dd><p>Works like the <code id=opening-the-input-stream:dom-open><a href=nav-history-apis.html#dom-open>window.open()</a></code> method.</dl>

  

  <p><code id=opening-the-input-stream:document-6><a href=dom.html#document>Document</a></code> objects have an <dfn id=active-parser-was-aborted>active parser was aborted</dfn> boolean, which is
  used to prevent scripts from invoking the <code id=opening-the-input-stream:dom-document-open><a href=#dom-document-open>document.open()</a></code>
  and <code id=opening-the-input-stream:dom-document-write-2><a href=#dom-document-write>document.write()</a></code> methods (directly or indirectly)
  after the document's <a id=opening-the-input-stream:active-parser href=dom.html#active-parser>active parser</a> has been aborted. It is initially false.</p>

  <p>The <dfn id=document-open-steps>document open steps</dfn>, given a <var>document</var>, are as follows:</p>

  <ol><li><p>If <var>document</var> is an <a href=https://dom.spec.whatwg.org/#xml-document id=opening-the-input-stream:xml-documents-2 data-x-internal=xml-documents>XML document</a>, then throw
   an <a id=opening-the-input-stream:invalidstateerror-3 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=opening-the-input-stream:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If <var>document</var>'s <a href=#throw-on-dynamic-markup-insertion-counter id=opening-the-input-stream:throw-on-dynamic-markup-insertion-counter>throw-on-dynamic-markup-insertion counter</a> is greater
   than 0, then throw an <a id=opening-the-input-stream:invalidstateerror-4 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a>
   <code id=opening-the-input-stream:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let <var>entryDocument</var> be the <a id=opening-the-input-stream:entry-global-object href=webappapis.html#entry-global-object>entry global object</a>'s <a href=nav-history-apis.html#concept-document-window id=opening-the-input-stream:concept-document-window>associated <code>Document</code></a>.<li><p>If <var>document</var>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=opening-the-input-stream:concept-document-origin data-x-internal=concept-document-origin>origin</a> is not
   <a id=opening-the-input-stream:same-origin href=browsers.html#same-origin>same origin</a> to <var>entryDocument</var>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=opening-the-input-stream:concept-document-origin-2 data-x-internal=concept-document-origin>origin</a>, then throw a
   <a id=opening-the-input-stream:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=opening-the-input-stream:domexception-5><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>
    <p>If <var>document</var> has an <a id=opening-the-input-stream:active-parser-2 href=dom.html#active-parser>active parser</a> whose <a id=opening-the-input-stream:script-nesting-level href=parsing.html#script-nesting-level>script nesting
    level</a> is greater than 0, then return <var>document</var>.</p>

    <p class=note>This basically causes <code id=opening-the-input-stream:dom-document-open-2><a href=#dom-document-open>document.open()</a></code> to
    be ignored when it's called in an inline script found during parsing, while still letting it
    have an effect when called from a non-parser task such as a timer callback or event handler.</p>
   <li>
    <p>Similarly, if <var>document</var>'s <a id=opening-the-input-stream:unload-counter href=document-lifecycle.html#unload-counter>unload counter</a> is greater than 0, then
    return <var>document</var>.</p>

    <p class=note>This basically causes <code id=opening-the-input-stream:dom-document-open-3><a href=#dom-document-open>document.open()</a></code> to
    be ignored when it's called from a <code id=opening-the-input-stream:event-beforeunload><a href=indices.html#event-beforeunload>beforeunload</a></code>, <code id=opening-the-input-stream:event-pagehide><a href=indices.html#event-pagehide>pagehide</a></code>, or <code id=opening-the-input-stream:event-unload><a href=indices.html#event-unload>unload</a></code> event
    handler while the <code id=opening-the-input-stream:document-7><a href=dom.html#document>Document</a></code> is being unloaded.</p>
   <li>
    <p>If <var>document</var>'s <a href=#active-parser-was-aborted id=opening-the-input-stream:active-parser-was-aborted>active parser was aborted</a> is true, then return
    <var>document</var>.</p>

    <p class=note>This notably causes <code id=opening-the-input-stream:dom-document-open-4><a href=#dom-document-open>document.open()</a></code> to
    be ignored if it is called after a <a href=browsing-the-web.html#navigate id=opening-the-input-stream:navigate>navigation</a> has started, but
    only during the initial parse. See <a href=https://github.com/whatwg/html/issues/4723>issue
    #4723</a> for more background.</p>
   <li><p>If <var>document</var>'s <a id=opening-the-input-stream:node-navigable href=document-sequences.html#node-navigable>node navigable</a> is non-null and
   <var>document</var>'s <a id=opening-the-input-stream:node-navigable-2 href=document-sequences.html#node-navigable>node navigable</a>'s <a id=opening-the-input-stream:ongoing-navigation href=browsing-the-web.html#ongoing-navigation>ongoing navigation</a> is a
   <a id=opening-the-input-stream:navigation-id href=browsing-the-web.html#navigation-id>navigation ID</a>, then <a href=document-lifecycle.html#nav-stop id=opening-the-input-stream:nav-stop>stop loading</a>
   <var>document</var>'s <a id=opening-the-input-stream:node-navigable-3 href=document-sequences.html#node-navigable>node navigable</a>.<li><p>For each <a id=opening-the-input-stream:shadow-including-inclusive-descendant href=https://dom.spec.whatwg.org/#concept-shadow-including-inclusive-descendant data-x-internal=shadow-including-inclusive-descendant>shadow-including inclusive descendant</a> <var>node</var> of
   <var>document</var>, <a id=opening-the-input-stream:erase-all-event-listeners-and-handlers href=webappapis.html#erase-all-event-listeners-and-handlers>erase all event listeners and handlers</a> given
   <var>node</var>.<li><p>If <var>document</var> is the <a href=nav-history-apis.html#concept-document-window id=opening-the-input-stream:concept-document-window-2>associated
   <code>Document</code></a> of <var>document</var>'s <a id=opening-the-input-stream:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global object</a>, then
   <a id=opening-the-input-stream:erase-all-event-listeners-and-handlers-2 href=webappapis.html#erase-all-event-listeners-and-handlers>erase all event listeners and handlers</a> given <var>document</var>'s <a id=opening-the-input-stream:concept-relevant-global-2 href=webappapis.html#concept-relevant-global>relevant
   global object</a>.<li><p><a href=https://dom.spec.whatwg.org/#concept-node-replace-all id=opening-the-input-stream:concept-node-replace-all data-x-internal=concept-node-replace-all>Replace all</a> with null within
   <var>document</var>.<li>
    <p>If <var>document</var> is <a id=opening-the-input-stream:fully-active href=document-sequences.html#fully-active>fully active</a>, then:</p>

    <ol><li><p>Let <var>newURL</var> be a copy of <var>entryDocument</var>'s <a href=https://dom.spec.whatwg.org/#concept-document-url id="opening-the-input-stream:the-document's-address" data-x-internal="the-document's-address">URL</a>.<li><p>If <var>entryDocument</var> is not <var>document</var>, then set <var>newURL</var>'s
     <a href=https://url.spec.whatwg.org/#concept-url-fragment id=opening-the-input-stream:concept-url-fragment data-x-internal=concept-url-fragment>fragment</a> to null.<li><p>Run the <a id=opening-the-input-stream:url-and-history-update-steps href=browsing-the-web.html#url-and-history-update-steps>URL and history update steps</a> with <var>document</var> and
     <var>newURL</var>.</ol>
   <li><p>Set <var>document</var>'s <a id=opening-the-input-stream:is-initial-about:blank href=dom.html#is-initial-about:blank>is initial <code>about:blank</code></a> to
   false.<li><p>If <var>document</var>'s <a id=opening-the-input-stream:iframe-load-in-progress href=iframe-embed-object.html#iframe-load-in-progress>iframe load in progress</a> flag is set, then set
   <var>document</var>'s <a id=opening-the-input-stream:mute-iframe-load href=iframe-embed-object.html#mute-iframe-load>mute iframe load</a> flag.<li><p>Set <var>document</var> to <a id=opening-the-input-stream:no-quirks-mode href=https://dom.spec.whatwg.org/#concept-document-no-quirks data-x-internal=no-quirks-mode>no-quirks mode</a>.<li><p>Create a new <a id=opening-the-input-stream:html-parser href=parsing.html#html-parser>HTML parser</a> and associate it with <var>document</var>. This is a
   <dfn id=script-created-parser>script-created parser</dfn> (meaning that it can be closed by the <code id=opening-the-input-stream:dom-document-open-5><a href=#dom-document-open>document.open()</a></code> and <code id=opening-the-input-stream:dom-document-close><a href=#dom-document-close>document.close()</a></code> methods, and that the tokenizer will wait for
   an explicit call to <code id=opening-the-input-stream:dom-document-close-2><a href=#dom-document-close>document.close()</a></code> before emitting an
   end-of-file token). The encoding <a href=parsing.html#concept-encoding-confidence id=opening-the-input-stream:concept-encoding-confidence>confidence</a> is
   <i>irrelevant</i>.<li><p>Set the <a id=opening-the-input-stream:insertion-point href=parsing.html#insertion-point>insertion point</a> to point at just before the end of the <a id=opening-the-input-stream:input-stream href=parsing.html#input-stream>input
   stream</a> (which at this point will be empty).<li>
    <p><a id=opening-the-input-stream:update-the-current-document-readiness href=dom.html#update-the-current-document-readiness>Update the current document readiness</a> of <var>document</var> to "<code>loading</code>".</p>

    <p class=note>This causes a <code id=opening-the-input-stream:event-readystatechange><a href=indices.html#event-readystatechange>readystatechange</a></code>
    event to fire, but the event is actually unobservable to author code, because of the previous
    step which <a href=webappapis.html#erase-all-event-listeners-and-handlers id=opening-the-input-stream:erase-all-event-listeners-and-handlers-3>erased all event listeners and
    handlers</a> that could observe it.</p>
   <li><p>Return <var>document</var>.</ol>

  <p class=note>The <a href=#document-open-steps id=opening-the-input-stream:document-open-steps>document open steps</a> do not affect whether a <code id=opening-the-input-stream:document-8><a href=dom.html#document>Document</a></code>
  is <a id=opening-the-input-stream:ready-for-post-load-tasks href=parsing.html#ready-for-post-load-tasks>ready for post-load tasks</a> or <a id=opening-the-input-stream:completely-loaded href=document-lifecycle.html#completely-loaded>completely loaded</a>.</p>

  <p>The <dfn data-dfn-for=Document id=dom-document-open data-dfn-type=method><code>open(<var>unused1</var>,
  <var>unused2</var>)</code></dfn> method must return the result of running the <a href=#document-open-steps id=opening-the-input-stream:document-open-steps-2>document open
  steps</a> with <a id=opening-the-input-stream:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.</p>

  <p id=dom-document-open-unused-arguments class=note><a href=#dom-document-open-unused-arguments class=self-link></a>The <var>unused1</var> and
  <var>unused2</var> arguments are ignored, but kept in the IDL to allow code that calls the
  function with one or two arguments to continue working. They are necessary due to Web IDL
  <a id=opening-the-input-stream:overload-resolution-algorithm href=https://webidl.spec.whatwg.org/#dfn-overload-resolution-algorithm data-x-internal=overload-resolution-algorithm>overload resolution algorithm</a> rules, which would throw a <code id=opening-the-input-stream:typeerror><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code>
  exception for such calls had the arguments not been there. <a href=https://github.com/whatwg/webidl/issues/581>whatwg/webidl issue #581</a> investigates
  changing the algorithm to allow for their removal. <a href=references.html#refsWEBIDL>[WEBIDL]</a></p>

  <p>The <dfn data-dfn-for=Document id=dom-document-open-window data-dfn-type=method><code>open(<var>url</var>,
  <var>name</var>, <var>features</var>)</code></dfn> method must run these steps:</p>

  <ol><li><p>If <a id=opening-the-input-stream:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> is not <a id=opening-the-input-stream:fully-active-2 href=document-sequences.html#fully-active>fully active</a>, then throw an
   <a id=opening-the-input-stream:invalidaccesserror href=https://webidl.spec.whatwg.org/#invalidaccesserror data-x-internal=invalidaccesserror>"<code>InvalidAccessError</code>"</a> <code id=opening-the-input-stream:domexception-6><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Return the result of running the <a id=opening-the-input-stream:window-open-steps href=nav-history-apis.html#window-open-steps>window open steps</a> with <var>url</var>,
   <var>name</var>, and <var>features</var>.</ol>

  



  <h4 id=closing-the-input-stream><span class=secno>8.4.2</span> Closing the input stream<a href=#closing-the-input-stream class=self-link></a></h4>

  <dl class=domintro><dt><code><var>document</var>.<a href=#dom-document-close id=dom-document-close-dev>close</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/close title="The Document.close() method finishes writing to a document, opened with Document.open().">Document/close</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>11+</span></span><span class="chrome yes"><span>Chrome</span><span>64+</span></span><hr><span class="opera yes"><span>Opera</span><span>51+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>4+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>47+</span></span></div></div></div><dd>
    <p>Closes the input stream that was opened by the <code id=closing-the-input-stream:dom-document-open><a href=#dom-document-open>document.open()</a></code> method.</p>

    <p>Throws an <a id=closing-the-input-stream:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=closing-the-input-stream:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the
    <code id=closing-the-input-stream:document><a href=dom.html#document>Document</a></code> is an <a href=https://dom.spec.whatwg.org/#xml-document id=closing-the-input-stream:xml-documents data-x-internal=xml-documents>XML document</a>.</p>

    <p>Throws an <a id=closing-the-input-stream:invalidstateerror-2 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=closing-the-input-stream:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the
    parser is currently executing a <a id=closing-the-input-stream:custom-element-constructor href=custom-elements.html#custom-element-constructor>custom element constructor</a>.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=Document id=dom-document-close data-dfn-type=method><code>close()</code></dfn> method must run the following
  steps:</p>

  <ol><li><p>If <a id=closing-the-input-stream:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> is an <a href=https://dom.spec.whatwg.org/#xml-document id=closing-the-input-stream:xml-documents-2 data-x-internal=xml-documents>XML document</a>, then throw
   an <a id=closing-the-input-stream:invalidstateerror-3 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=closing-the-input-stream:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If <a id=closing-the-input-stream:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#throw-on-dynamic-markup-insertion-counter id=closing-the-input-stream:throw-on-dynamic-markup-insertion-counter>throw-on-dynamic-markup-insertion counter</a> is greater
   than zero, then throw an <a id=closing-the-input-stream:invalidstateerror-4 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a>
   <code id=closing-the-input-stream:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If there is no <a href=#script-created-parser id=closing-the-input-stream:script-created-parser>script-created parser</a> associated with <a id=closing-the-input-stream:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, then
   return.<li><p>Insert an <a id=closing-the-input-stream:explicit-eof-character href=parsing.html#explicit-eof-character>explicit "EOF" character</a> at the end of the parser's <a id=closing-the-input-stream:input-stream href=parsing.html#input-stream>input
   stream</a>.<li><p>If <a id=closing-the-input-stream:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=closing-the-input-stream:pending-parsing-blocking-script href=scripting.html#pending-parsing-blocking-script>pending parsing-blocking script</a> is not null, then
   return.<li><p>Run the tokenizer, processing resulting tokens as they are emitted, and stopping when the
   tokenizer reaches the <a id=closing-the-input-stream:explicit-eof-character-2 href=parsing.html#explicit-eof-character>explicit "EOF" character</a> or <a href=webappapis.html#spin-the-event-loop id=closing-the-input-stream:spin-the-event-loop>spins the event loop</a>.</ol>

  



  <h4 id=document.write()><span class=secno>8.4.3</span> <code id=document.write():dom-document-write><a href=#dom-document-write>document.write()</a></code><a href=#document.write() class=self-link></a></h4>

  <dl class=domintro><dt><code><var>document</var>.<a href=#dom-document-write id=dom-document-write-dev>write</a>(...<var>text</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/write title="The document.write() method writes a string of text to a document stream opened by document.open().">Document/write</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>3+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>4+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>In general, adds the given string(s) to the <code id=document.write():document><a href=dom.html#document>Document</a></code>'s input stream.</p>

    <p class=warning>This method has very idiosyncratic behavior. In some cases, this method can
    affect the state of the <a id=document.write():html-parser href=parsing.html#html-parser>HTML parser</a> while the parser is running, resulting in a DOM
    that does not correspond to the source of the document (e.g. if the string written is the string
    "<code>&lt;plaintext></code>" or "<code>&lt;!--</code>"). In other cases,
    the call can clear the current page first, as if <code id=document.write():dom-document-open><a href=#dom-document-open>document.open()</a></code> had been called. In yet more cases, the method
    is simply ignored, or throws an exception. User agents are <a href=parsing.html#document-written-scripts-intervention>explicitly allowed to avoid executing
    <code>script</code> elements inserted via this method</a>. And to make matters even worse, the
    exact behavior of this method can in some cases be dependent on network latency, which can lead to failures that are very hard to debug. <strong>For all these reasons, use
    of this method is strongly discouraged.</strong></p>

    <p>Throws an <a id=document.write():invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=document.write():domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> when
    invoked on <a id=document.write():xml-documents href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a>.</p>

    <p>Throws an <a id=document.write():invalidstateerror-2 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=document.write():domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the
    parser is currently executing a <a id=document.write():custom-element-constructor href=custom-elements.html#custom-element-constructor>custom element constructor</a>.</p>
   </dl>

  <p class=warning>This method performs no sanitization to remove potentially-dangerous elements
  and attributes like <code id=document.write():the-script-element><a href=scripting.html#the-script-element>script</a></code> or <a id=document.write():event-handler-content-attributes href=webappapis.html#event-handler-content-attributes>event handler content attributes</a>.</p>

  

  <p><code id=document.write():document-2><a href=dom.html#document>Document</a></code> objects have an <dfn id=ignore-destructive-writes-counter>ignore-destructive-writes counter</dfn>, which is
  used in conjunction with the processing of <code id=document.write():the-script-element-2><a href=scripting.html#the-script-element>script</a></code> elements to prevent external
  scripts from being able to use <code id=document.write():dom-document-write-2><a href=#dom-document-write>document.write()</a></code> to blow
  away the document by implicitly calling <code id=document.write():dom-document-open-2><a href=#dom-document-open>document.open()</a></code>.
  Initially, the counter must be set to zero.</p>

  <p>The <dfn id=document-write-steps>document write steps</dfn>, given a <code id=document.write():document-3><a href=dom.html#document>Document</a></code> object <var>document</var>,
  a list <var>text</var>, a boolean <var>lineFeed</var>, and a string <var>sink</var>, are as
  follows:</p>

  <ol><li><p>Let <var>string</var> be the empty string.<li><p>Let <var>isTrusted</var> be false if <var>text</var> <a href=https://infra.spec.whatwg.org/#list-contain id=document.write():list-contains data-x-internal=list-contains>contains</a> a string; otherwise true.<li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=document.write():list-iterate data-x-internal=list-iterate>For each</a> <var>value</var> of <var>text</var>:</p>

    <ol><li><p>If <var>value</var> is a <code id=document.write():tt-trustedhtml><a data-x-internal=tt-trustedhtml href=https://w3c.github.io/trusted-types/dist/spec/#trustedhtml>TrustedHTML</a></code> object, then
     append <var>value</var>'s associated <a href=https://w3c.github.io/trusted-types/dist/spec/#trustedhtml-data id=document.write():tt-trustedhtml-data data-x-internal=tt-trustedhtml-data>data</a> to
     <var>string</var>.<li><p>Otherwise, append <var>value</var> to <var>string</var>.</ol>
   <li><p>If <var>isTrusted</var> is false, set <var>string</var> to the result of invoking the
   <a href=https://w3c.github.io/trusted-types/dist/spec/#get-trusted-type-compliant-string-algorithm id=document.write():tt-getcompliantstring data-x-internal=tt-getcompliantstring>Get Trusted Type compliant string</a> algorithm with
   <code id=document.write():tt-trustedhtml-2><a data-x-internal=tt-trustedhtml href=https://w3c.github.io/trusted-types/dist/spec/#trustedhtml>TrustedHTML</a></code>, <a id=document.write():this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=document.write():concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global
   object</a>, <var>string</var>, <var>sink</var>, and "<code>script</code>".<li><p>If <var>lineFeed</var> is true, append U+000A LINE FEED to <var>string</var>.<li><p>If <var>document</var> is an <a href=https://dom.spec.whatwg.org/#xml-document id=document.write():xml-documents-2 data-x-internal=xml-documents>XML document</a>, then throw
   an <a id=document.write():invalidstateerror-3 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=document.write():domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If <var>document</var>'s <a href=#throw-on-dynamic-markup-insertion-counter id=document.write():throw-on-dynamic-markup-insertion-counter>throw-on-dynamic-markup-insertion counter</a> is greater
   than 0, then throw an <a id=document.write():invalidstateerror-4 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a>
   <code id=document.write():domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If <var>document</var>'s <a href=#active-parser-was-aborted id=document.write():active-parser-was-aborted>active parser was aborted</a> is true, then
   return.<li>
    <p>If the <a id=document.write():insertion-point href=parsing.html#insertion-point>insertion point</a> is undefined, then:

    <ol><li><p>If <var>document</var>'s <a id=document.write():unload-counter href=document-lifecycle.html#unload-counter>unload counter</a> is greater than 0 or
     <var>document</var>'s <a href=#ignore-destructive-writes-counter id=document.write():ignore-destructive-writes-counter>ignore-destructive-writes counter</a> is greater than 0, then
     return.<li><p>Run the <a href=#document-open-steps id=document.write():document-open-steps>document open steps</a> with <var>document</var>.</ol>
   <li><p>Insert <var>string</var> into the <a id=document.write():input-stream href=parsing.html#input-stream>input stream</a> just before the <a id=document.write():insertion-point-2 href=parsing.html#insertion-point>insertion
   point</a>.<li>
    <p>If <var>document</var>'s <a id=document.write():pending-parsing-blocking-script href=scripting.html#pending-parsing-blocking-script>pending parsing-blocking script</a> is null, then have the
    <a id=document.write():html-parser-2 href=parsing.html#html-parser>HTML parser</a> process <var>string</var>, one code point at a time, processing
    resulting tokens as they are emitted, and stopping when the tokenizer reaches the insertion
    point or when the processing of the tokenizer is aborted by the tree construction stage (this
    can happen if a <code id=document.write():the-script-element-3><a href=scripting.html#the-script-element>script</a></code> end tag token is emitted by the tokenizer).

    <p class=note>If the <code id=document.write():dom-document-write-3><a href=#dom-document-write>document.write()</a></code> method was
    called from script executing inline (i.e. executing because the parser parsed a set of
    <code id=document.write():the-script-element-4><a href=scripting.html#the-script-element>script</a></code> tags), then this is a <a href=parsing.html#nestedParsing>reentrant invocation of the
    parser</a>. If the <a id=document.write():parser-pause-flag href=parsing.html#parser-pause-flag>parser pause flag</a> is set, the tokenizer will abort immediately
    and no HTML will be parsed, per the tokenizer's <a href=parsing.html#check-parser-pause-flag>parser pause
    flag check</a>.</p>
   </ol>

  <p>The <dfn data-dfn-for=Document id=dom-document-write data-dfn-type=method><code>document.write(...<var>text</var>)</code></dfn> method steps are
  to run the <a href=#document-write-steps id=document.write():document-write-steps>document write steps</a> with <a id=document.write():this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, <var>text</var>, false, and
  "<code>Document write</code>".</p>

  


  <h4 id=document.writeln()><span class=secno>8.4.4</span> <code id=document.writeln():dom-document-writeln><a href=#dom-document-writeln>document.writeln()</a></code><a href=#document.writeln() class=self-link></a></h4>

  <dl class=domintro><dt><code><var>document</var>.<a href=#dom-document-writeln id=dom-document-writeln-dev>writeln</a>(...<var>text</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/writeln title="Writes a string of text followed by a newline character to a document.">Document/writeln</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>11+</span></span><span class="chrome yes"><span>Chrome</span><span>64+</span></span><hr><span class="opera yes"><span>Opera</span><span>51+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>4+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>47+</span></span></div></div></div><dd>
    <p>Adds the given string(s) to the <code id=document.writeln():document><a href=dom.html#document>Document</a></code>'s input stream, followed by a newline
    character. If necessary, calls the <code id=document.writeln():dom-document-open><a href=#dom-document-open>open()</a></code> method
    implicitly first.</p>

    <p class=warning>This method has very idiosyncratic behavior. <strong>Use of this
    method is strongly discouraged, for the same reasons as <code id=document.writeln():dom-document-write><a href=#dom-document-write>document.write()</a></code>.</strong></p>

    <p>Throws an <a id=document.writeln():invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=document.writeln():domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> when
    invoked on <a id=document.writeln():xml-documents href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a>.</p>

    <p>Throws an <a id=document.writeln():invalidstateerror-2 href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=document.writeln():domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the
    parser is currently executing a <a id=document.writeln():custom-element-constructor href=custom-elements.html#custom-element-constructor>custom element constructor</a>.</p>
   </dl>

  <p class=warning>This method performs no sanitization to remove potentially-dangerous elements
  and attributes like <code id=document.writeln():the-script-element><a href=scripting.html#the-script-element>script</a></code> or <a id=document.writeln():event-handler-content-attributes href=webappapis.html#event-handler-content-attributes>event handler content attributes</a>.</p>

  

  <p>The <dfn data-dfn-for=Document id=dom-document-writeln data-dfn-type=method><code>document.writeln(...<var>text</var>)</code></dfn> method steps are
  to run the <a href=#document-write-steps id=document.writeln():document-write-steps>document write steps</a> with <a id=document.writeln():this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, <var>text</var>, true, and
  "<code>Document writeln</code>".</p>

  


  <h3 id=dom-parsing-and-serialization><span class=secno>8.5</span> DOM parsing and serialization APIs<a href=#dom-parsing-and-serialization class=self-link></a></h3><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/DOMParser title="The DOMParser interface provides the ability to parse XML or HTML source code from a string into a DOM Document.">DOMParser</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1.3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>8+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div>

  <pre><code class='idl'><c- b>partial</c-> <c- b>interface</c-> <a id='Element-partial' href='https://dom.spec.whatwg.org/#interface-element' data-x-internal='element'><c- g>Element</c-></a> {
  [<a id='dom-parsing-and-serialization:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>undefined</c-> <a href='#dom-element-sethtmlunsafe' id='dom-parsing-and-serialization:dom-element-sethtmlunsafe'><c- g>setHTMLUnsafe</c-></a>((<code id='dom-parsing-and-serialization:tt-trustedhtml'><a data-x-internal='tt-trustedhtml' href='https://w3c.github.io/trusted-types/dist/spec/#trustedhtml'><c- n>TrustedHTML</c-></a></code> <c- b>or</c-> <c- b>DOMString</c->) <c- g>html</c->);
  <c- b>DOMString</c-> <a href='#dom-element-gethtml' id='dom-parsing-and-serialization:dom-element-gethtml'><c- g>getHTML</c-></a>(<c- b>optional</c-> <a href='#gethtmloptions' id='dom-parsing-and-serialization:gethtmloptions'><c- n>GetHTMLOptions</c-></a> <c- g>options</c-> = {});

  [<a id='dom-parsing-and-serialization:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> (<code id='dom-parsing-and-serialization:tt-trustedhtml-2'><a data-x-internal='tt-trustedhtml' href='https://w3c.github.io/trusted-types/dist/spec/#trustedhtml'><c- n>TrustedHTML</c-></a></code> <c- b>or</c-> [<a id='dom-parsing-and-serialization:legacynulltoemptystring' href='https://webidl.spec.whatwg.org/#LegacyNullToEmptyString' data-x-internal='legacynulltoemptystring'><c- g>LegacyNullToEmptyString</c-></a>] <c- b>DOMString</c->) <a href='#dom-element-innerhtml' id='dom-parsing-and-serialization:dom-element-innerhtml'><c- g>innerHTML</c-></a>;
  [<a id='dom-parsing-and-serialization:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> (<code id='dom-parsing-and-serialization:tt-trustedhtml-3'><a data-x-internal='tt-trustedhtml' href='https://w3c.github.io/trusted-types/dist/spec/#trustedhtml'><c- n>TrustedHTML</c-></a></code> <c- b>or</c-> [<a id='dom-parsing-and-serialization:legacynulltoemptystring-2' href='https://webidl.spec.whatwg.org/#LegacyNullToEmptyString' data-x-internal='legacynulltoemptystring'><c- g>LegacyNullToEmptyString</c-></a>] <c- b>DOMString</c->) <a href='#dom-element-outerhtml' id='dom-parsing-and-serialization:dom-element-outerhtml'><c- g>outerHTML</c-></a>;
  [<a id='dom-parsing-and-serialization:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>undefined</c-> <a href='#dom-element-insertadjacenthtml' id='dom-parsing-and-serialization:dom-element-insertadjacenthtml'><c- g>insertAdjacentHTML</c-></a>(<c- b>DOMString</c-> <c- g>position</c->, (<code id='dom-parsing-and-serialization:tt-trustedhtml-4'><a data-x-internal='tt-trustedhtml' href='https://w3c.github.io/trusted-types/dist/spec/#trustedhtml'><c- n>TrustedHTML</c-></a></code> <c- b>or</c-> <c- b>DOMString</c->) <c- g>string</c->);
};

<c- b>partial</c-> <c- b>interface</c-> <a id='ShadowRoot-partial' href='https://dom.spec.whatwg.org/#interface-shadowroot' data-x-internal='shadowroot'><c- g>ShadowRoot</c-></a> {
  [<a id='dom-parsing-and-serialization:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>undefined</c-> <a href='#dom-shadowroot-sethtmlunsafe' id='dom-parsing-and-serialization:dom-shadowroot-sethtmlunsafe'><c- g>setHTMLUnsafe</c-></a>((<code id='dom-parsing-and-serialization:tt-trustedhtml-5'><a data-x-internal='tt-trustedhtml' href='https://w3c.github.io/trusted-types/dist/spec/#trustedhtml'><c- n>TrustedHTML</c-></a></code> <c- b>or</c-> <c- b>DOMString</c->) <c- g>html</c->);
  <c- b>DOMString</c-> <a href='#dom-shadowroot-gethtml' id='dom-parsing-and-serialization:dom-shadowroot-gethtml'><c- g>getHTML</c-></a>(<c- b>optional</c-> <a href='#gethtmloptions' id='dom-parsing-and-serialization:gethtmloptions-2'><c- n>GetHTMLOptions</c-></a> <c- g>options</c-> = {});

  [<a id='dom-parsing-and-serialization:cereactions-6' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> (<code id='dom-parsing-and-serialization:tt-trustedhtml-6'><a data-x-internal='tt-trustedhtml' href='https://w3c.github.io/trusted-types/dist/spec/#trustedhtml'><c- n>TrustedHTML</c-></a></code> <c- b>or</c-> [<a id='dom-parsing-and-serialization:legacynulltoemptystring-3' href='https://webidl.spec.whatwg.org/#LegacyNullToEmptyString' data-x-internal='legacynulltoemptystring'><c- g>LegacyNullToEmptyString</c-></a>] <c- b>DOMString</c->) <a href='#dom-shadowroot-innerhtml' id='dom-parsing-and-serialization:dom-shadowroot-innerhtml'><c- g>innerHTML</c-></a>;
};

<c- b>dictionary</c-> <dfn id='gethtmloptions' data-dfn-type='dictionary'><c- g>GetHTMLOptions</c-></dfn> {
  <c- b>boolean</c-> <dfn data-dfn-for='GetHTMLOptions' id='dom-gethtmloptions-serializableshadowroots' data-dfn-type='dict-member'><c- g>serializableShadowRoots</c-></dfn> = <c- b>false</c->;
  <c- b>sequence</c->&lt;<c- n>ShadowRoot</c->&gt; <dfn data-dfn-for='GetHTMLOptions' id='dom-gethtmloptions-shadowroots' data-dfn-type='dict-member'><c- g>shadowRoots</c-></dfn> = [];
};</code></pre>

  <h4 id=the-domparser-interface><span class=secno>8.5.1</span> The <code id=the-domparser-interface:domparser><a href=#domparser>DOMParser</a></code> interface<a href=#the-domparser-interface class=self-link></a></h4>

  <p>The <code id=the-domparser-interface:domparser-2><a href=#domparser>DOMParser</a></code> interface allows authors to create new <code id=the-domparser-interface:document><a href=dom.html#document>Document</a></code> objects
  by parsing strings, as either HTML or XML.</p>

  <dl class=domintro><dt><code><var>parser</var> = new <a href=#dom-domparser-constructor id=dom-domparser-constructor-dev>DOMParser</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/DOMParser title="The DOMParser() constructor creates a new DOMParser object. This object can be used to parse the text of a document using the parseFromString() method.">DOMParser/DOMParser</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1.3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>8+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd><p>Constructs a new <code id=the-domparser-interface:domparser-3><a href=#domparser>DOMParser</a></code> object.<dt><code><var>document</var> = <var>parser</var>.<a href=#dom-domparser-parsefromstring id=dom-domparser-parsefromstring-dev>parseFromString</a>(<var>string</var>, <var>type</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString title="The parseFromString() method of the DOMParser interface parses a string containing either HTML or XML, returning an HTMLDocument or an XMLDocument.">DOMParser/parseFromString</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1.3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>8+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>Parses <var>string</var> using either the HTML or XML parser, according to <var>type</var>,
    and returns the resulting <code id=the-domparser-interface:document-2><a href=dom.html#document>Document</a></code>. <var>type</var> can be "<code id=the-domparser-interface:text/html><a href=iana.html#text/html>text/html</a></code>"
    (which will invoke the HTML parser), or any of "<code id=the-domparser-interface:text/xml><a href=indices.html#text/xml>text/xml</a></code>",
    "<code id=the-domparser-interface:application/xml><a href=indices.html#application/xml>application/xml</a></code>", "<code id=the-domparser-interface:application/xhtml+xml><a href=iana.html#application/xhtml+xml>application/xhtml+xml</a></code>", or
    "<code id=the-domparser-interface:image/svg+xml><a href=indices.html#image/svg+xml>image/svg+xml</a></code>" (which will invoke the XML parser).</p>

    <p>For the XML parser, if <var>string</var> cannot be parsed, then the returned
    <code id=the-domparser-interface:document-3><a href=dom.html#document>Document</a></code> will contain elements describing the resulting error.</p>

    <p>Note that <code id=the-domparser-interface:the-script-element><a href=scripting.html#the-script-element>script</a></code> elements are not evaluated during parsing, and the resulting
    document's <a href=https://dom.spec.whatwg.org/#concept-document-encoding id="the-domparser-interface:document's-character-encoding" data-x-internal="document's-character-encoding">encoding</a> will always be
    <a id=the-domparser-interface:utf-8 href=https://encoding.spec.whatwg.org/#utf-8 data-x-internal=utf-8>UTF-8</a>. The document's <a href=https://dom.spec.whatwg.org/#concept-document-url id="the-domparser-interface:the-document's-address" data-x-internal="the-document's-address">URL</a> will be
    inherited from <var>parser</var>'s <a id=the-domparser-interface:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global object</a>.</p>

    <p>Values other than the above for <var>type</var> will cause a <code id=the-domparser-interface:typeerror><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code> exception
    to be thrown.</p>
   </dl>

  <p class=note>The design of <code id=the-domparser-interface:domparser-4><a href=#domparser>DOMParser</a></code>, as a class that needs to be constructed and
  then have its <code id=the-domparser-interface:dom-domparser-parsefromstring><a href=#dom-domparser-parsefromstring>parseFromString()</a></code> method
  called, is an unfortunate historical artifact. If we were designing this functionality today it
  would be a standalone function. For parsing HTML, the modern alternative is <code id=the-domparser-interface:dom-parsehtmlunsafe><a href=#dom-parsehtmlunsafe>Document.parseHTMLUnsafe()</a></code>.</p>

  <p class=warning>This method performs no sanitization to remove potentially-dangerous elements
  and attributes like <code id=the-domparser-interface:the-script-element-2><a href=scripting.html#the-script-element>script</a></code> or <a id=the-domparser-interface:event-handler-content-attributes href=webappapis.html#event-handler-content-attributes>event handler content attributes</a>.</p>

  <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='domparser' data-dfn-type='interface'><c- g>DOMParser</c-></dfn> {
  <a href='#dom-domparser-constructor' id='the-domparser-interface:dom-domparser-constructor'><c- g>constructor</c-></a>();

  [<c- g>NewObject</c->] <code id='the-domparser-interface:document-4'><a href='dom.html#document'><c- n>Document</c-></a></code> <a href='#dom-domparser-parsefromstring' id='the-domparser-interface:dom-domparser-parsefromstring-2'><c- g>parseFromString</c-></a>((<code id='the-domparser-interface:tt-trustedhtml'><a data-x-internal='tt-trustedhtml' href='https://w3c.github.io/trusted-types/dist/spec/#trustedhtml'><c- n>TrustedHTML</c-></a></code> <c- b>or</c-> <c- b>DOMString</c->) <c- g>string</c->, <a href='#domparsersupportedtype' id='the-domparser-interface:domparsersupportedtype'><c- n>DOMParserSupportedType</c-></a> <c- g>type</c->);
};

<c- b>enum</c-> <dfn id='domparsersupportedtype' data-dfn-type='enum'><c- g>DOMParserSupportedType</c-></dfn> {
  <c- s>&quot;</c-><a href='#dom-domparsersupportedtype-texthtml' id='the-domparser-interface:dom-domparsersupportedtype-texthtml'><c- s>text/html</c-></a><c- s>&quot;</c->,
  <c- s>&quot;</c-><a href='#dom-domparsersupportedtype-otherwise' id='the-domparser-interface:dom-domparsersupportedtype-otherwise'><c- s>text/xml</c-></a><c- s>&quot;</c->,
  <c- s>&quot;</c-><a href='#dom-domparsersupportedtype-otherwise' id='the-domparser-interface:dom-domparsersupportedtype-otherwise-2'><c- s>application/xml</c-></a><c- s>&quot;</c->,
  <c- s>&quot;</c-><a href='#dom-domparsersupportedtype-otherwise' id='the-domparser-interface:dom-domparsersupportedtype-otherwise-3'><c- s>application/xhtml+xml</c-></a><c- s>&quot;</c->,
  <c- s>&quot;</c-><a href='#dom-domparsersupportedtype-otherwise' id='the-domparser-interface:dom-domparsersupportedtype-otherwise-4'><c- s>image/svg+xml</c-></a><c- s>&quot;</c->
};</code></pre>

  

  <p>The <dfn id=dom-domparser-constructor><code>new DOMParser()</code></dfn> constructor
  steps are to do nothing.</p>

  <p>The <dfn data-dfn-for=DOMParser id=dom-domparser-parsefromstring data-dfn-type=method><code>parseFromString(<var>string</var>,
  <var>type</var>)</code></dfn> method steps are:</p>

  <ol><li><p>Let <var>compliantString</var> be the result of invoking the <a href=https://w3c.github.io/trusted-types/dist/spec/#get-trusted-type-compliant-string-algorithm id=the-domparser-interface:tt-getcompliantstring data-x-internal=tt-getcompliantstring>Get Trusted Type compliant string</a> algorithm with <code id=the-domparser-interface:tt-trustedhtml-2><a data-x-internal=tt-trustedhtml href=https://w3c.github.io/trusted-types/dist/spec/#trustedhtml>TrustedHTML</a></code>, <a id=the-domparser-interface:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-domparser-interface:concept-relevant-global-2 href=webappapis.html#concept-relevant-global>relevant global
   object</a>, <var>string</var>, "<code>DOMParser parseFromString</code>", and "<code>script</code>".<li>
    <p>Let <var>document</var> be a new <code id=the-domparser-interface:document-5><a href=dom.html#document>Document</a></code>, whose <a href=https://dom.spec.whatwg.org/#concept-document-content-type id=the-domparser-interface:concept-document-content-type data-x-internal=concept-document-content-type>content type</a> is <var>type</var> and <a href=https://dom.spec.whatwg.org/#concept-document-url id="the-domparser-interface:the-document's-address-2" data-x-internal="the-document's-address">URL</a> is <a id=the-domparser-interface:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-domparser-interface:concept-relevant-global-3 href=webappapis.html#concept-relevant-global>relevant global object</a>'s <a href=nav-history-apis.html#concept-document-window id=the-domparser-interface:concept-document-window>associated <code>Document</code></a>'s <a href=https://dom.spec.whatwg.org/#concept-document-url id="the-domparser-interface:the-document's-address-3" data-x-internal="the-document's-address">URL</a>.</p>
    

    <p class=note>The document's <a href=https://dom.spec.whatwg.org/#concept-document-encoding id="the-domparser-interface:document's-character-encoding-2" data-x-internal="document's-character-encoding">encoding</a> will
    be left as its default, of <a id=the-domparser-interface:utf-8-2 href=https://encoding.spec.whatwg.org/#utf-8 data-x-internal=utf-8>UTF-8</a>. In particular, any XML declarations or
    <code id=the-domparser-interface:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code> elements found while parsing <var>compliantString</var> will have no effect.</p>
   <li>
    <p>Switch on <var>type</var>:</p>

    <dl class=switch><dt>"<dfn data-dfn-for=DOMParserSupportedType id=dom-domparsersupportedtype-texthtml data-dfn-type=enum-value><code>text/html</code></dfn>"<dd>
      <ol><li><p><a href=#parse-html-from-a-string id=the-domparser-interface:parse-html-from-a-string>Parse HTML from a string</a> given <var>document</var> and
       <var>compliantString</var>.</ol>

      <p class=note>Since <var>document</var> does not have a <a href=document-sequences.html#concept-document-bc id=the-domparser-interface:concept-document-bc>browsing context</a>, <a href=webappapis.html#concept-n-script id=the-domparser-interface:concept-n-script>scripting is disabled</a>.</p>
     <dt><dfn id=dom-domparsersupportedtype-otherwise>Otherwise</dfn><dd>
      <ol><li><p>Create an <a id=the-domparser-interface:xml-parser href=xhtml.html#xml-parser>XML parser</a> <var>parser</var>, associated with
       <var>document</var>, and with <a id=the-domparser-interface:xml-scripting-support-disabled href=xhtml.html#xml-scripting-support-disabled>XML scripting support disabled</a>.<li><p>Parse <var>compliantString</var> using <var>parser</var>.</p>

       <li>
        <p>If the previous step resulted in an XML well-formedness or XML namespace well-formedness
        error, then:</p>

        <ol><li><p><a id=the-domparser-interface:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>document</var> has no child nodes.<li><p>Let <var>root</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-create-element id=the-domparser-interface:create-an-element data-x-internal=create-an-element>creating an
         element</a> given <var>document</var>, "<code>parsererror</code>", and "<code>http://www.mozilla.org/newlayout/xml/parsererror.xml</code>".<li><p>Optionally, add attributes or children to <var>root</var> to describe the nature of
         the parsing error.<li><p><a href=https://dom.spec.whatwg.org/#concept-node-append id=the-domparser-interface:concept-node-append data-x-internal=concept-node-append>Append</a> <var>root</var> to
         <var>document</var>.</ol>
       </ol>
     </dl>
   <li><p>Return <var>document</var>.</p>
  </ol>

  <p>To <dfn id=parse-html-from-a-string>parse HTML from a string</dfn>, given a <code id=the-domparser-interface:document-6><a href=dom.html#document>Document</a></code> <var>document</var> and a
  <a id=the-domparser-interface:string href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> <var>html</var>:</p>

  <ol><li><p>Set <var>document</var>'s <a href=https://dom.spec.whatwg.org/#concept-document-type id=the-domparser-interface:concept-document-type data-x-internal=concept-document-type>type</a> to "<code>html</code>".<li><p>Create an <a id=the-domparser-interface:html-parser href=parsing.html#html-parser>HTML parser</a> <var>parser</var>, associated with
   <var>document</var>.<li><p>Place <var>html</var> into the <a id=the-domparser-interface:input-stream href=parsing.html#input-stream>input stream</a> for <var>parser</var>. The
   encoding <a href=parsing.html#concept-encoding-confidence id=the-domparser-interface:concept-encoding-confidence>confidence</a> is
   <i>irrelevant</i>.<li>
    <p>Start <var>parser</var> and let it run until it has consumed all the characters just
    inserted into the input stream.</p>

    <p class=note>This might mutate the document's <a href=https://dom.spec.whatwg.org/#concept-document-mode id=the-domparser-interface:concept-document-mode data-x-internal=concept-document-mode>mode</a>.</p>
   </ol>

  

  <h4 id=unsafe-html-parsing-methods><span class=secno>8.5.2</span> Unsafe HTML parsing methods<a href=#unsafe-html-parsing-methods class=self-link></a></h4>

  <dl class=domintro><dt><code><var>element</var>.<a href=#dom-element-sethtmlunsafe id=dom-element-sethtmlunsafe-dev>setHTMLUnsafe</a>(<var>html</var>)</code><dd>
    <p>Parses <var>html</var> using the HTML parser, and replaces the children of <var>element</var>
    with the result. <var>element</var> provides context for the HTML parser.</p>
   <dt><code><var>shadowRoot</var>.<a href=#dom-shadowroot-sethtmlunsafe id=dom-shadowroot-sethtmlunsafe-dev>setHTMLUnsafe</a>(<var>html</var>)</code><dd>
    <p>Parses <var>html</var> using the HTML parser, and replaces the children of
    <var>shadowRoot</var> with the result. <var>shadowRoot</var>'s <a href=https://dom.spec.whatwg.org/#concept-documentfragment-host id=unsafe-html-parsing-methods:concept-documentfragment-host data-x-internal=concept-documentfragment-host>host</a> provides context for the HTML parser.</p>
   <dt><code><var>doc</var> = Document.<a href=#dom-parsehtmlunsafe id=unsafe-html-parsing-methods:dom-parsehtmlunsafe>parseHTMLUnsafe</a>(<var>html</var>)</code><dd>
    <p>Parses <var>html</var> using the HTML parser, and returns the resulting
    <code id=unsafe-html-parsing-methods:document><a href=dom.html#document>Document</a></code>.</p>

    <p>Note that <code id=unsafe-html-parsing-methods:the-script-element><a href=scripting.html#the-script-element>script</a></code> elements are not evaluated during parsing, and the resulting
    document's <a href=https://dom.spec.whatwg.org/#concept-document-encoding id="unsafe-html-parsing-methods:document's-character-encoding" data-x-internal="document's-character-encoding">encoding</a> will always be
    <a id=unsafe-html-parsing-methods:utf-8 href=https://encoding.spec.whatwg.org/#utf-8 data-x-internal=utf-8>UTF-8</a>. The document's <a href=https://dom.spec.whatwg.org/#concept-document-url id="unsafe-html-parsing-methods:the-document's-address" data-x-internal="the-document's-address">URL</a> will be
    <code id=unsafe-html-parsing-methods:about:blank><a href=infrastructure.html#about:blank>about:blank</a></code>.</p>
   </dl>

  <p class=warning>These methods perform no sanitization to remove potentially-dangerous elements
  and attributes like <code id=unsafe-html-parsing-methods:the-script-element-2><a href=scripting.html#the-script-element>script</a></code> or <a id=unsafe-html-parsing-methods:event-handler-content-attributes href=webappapis.html#event-handler-content-attributes>event handler content attributes</a>.</p>

  

  <p><code id=unsafe-html-parsing-methods:element><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code>'s <dfn data-dfn-for=Element id=dom-element-sethtmlunsafe data-dfn-type=method><code>setHTMLUnsafe(<var>html</var>)</code></dfn> method steps
  are:</p>

  <ol><li><p>Let <var>compliantHTML</var> be the result of invoking the <a href=https://w3c.github.io/trusted-types/dist/spec/#get-trusted-type-compliant-string-algorithm id=unsafe-html-parsing-methods:tt-getcompliantstring data-x-internal=tt-getcompliantstring>Get Trusted Type compliant string</a> algorithm with <code id=unsafe-html-parsing-methods:tt-trustedhtml><a data-x-internal=tt-trustedhtml href=https://w3c.github.io/trusted-types/dist/spec/#trustedhtml>TrustedHTML</a></code>, <a id=unsafe-html-parsing-methods:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=unsafe-html-parsing-methods:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global
   object</a>, <var>html</var>, "<code>Element setHTMLUnsafe</code>", and "<code>script</code>".<li><p>Let <var>target</var> be <a id=unsafe-html-parsing-methods:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=unsafe-html-parsing-methods:template-contents href=scripting.html#template-contents>template contents</a> if
   <a id=unsafe-html-parsing-methods:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> is a <code id=unsafe-html-parsing-methods:the-template-element><a href=scripting.html#the-template-element>template</a></code> element; otherwise <a id=unsafe-html-parsing-methods:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.<li><p><a href=#unsafely-set-html id=unsafe-html-parsing-methods:unsafely-set-html>Unsafely set HTML</a> given <var>target</var>, <a id=unsafe-html-parsing-methods:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, and
   <var>compliantHTML</var>.</ol>

  <p><code id=unsafe-html-parsing-methods:shadowroot><a data-x-internal=shadowroot href=https://dom.spec.whatwg.org/#interface-shadowroot>ShadowRoot</a></code>'s <dfn data-dfn-for=ShadowRoot id=dom-shadowroot-sethtmlunsafe data-dfn-type=method><code>setHTMLUnsafe(<var>html</var>)</code></dfn> method steps
  are:</p>

  <ol><li><p>Let <var>compliantHTML</var> be the result of invoking the <a href=https://w3c.github.io/trusted-types/dist/spec/#get-trusted-type-compliant-string-algorithm id=unsafe-html-parsing-methods:tt-getcompliantstring-2 data-x-internal=tt-getcompliantstring>Get Trusted Type compliant string</a> algorithm with <code id=unsafe-html-parsing-methods:tt-trustedhtml-2><a data-x-internal=tt-trustedhtml href=https://w3c.github.io/trusted-types/dist/spec/#trustedhtml>TrustedHTML</a></code>, <a id=unsafe-html-parsing-methods:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=unsafe-html-parsing-methods:concept-relevant-global-2 href=webappapis.html#concept-relevant-global>relevant global
   object</a>, <var>html</var>, "<code>ShadowRoot setHTMLUnsafe</code>", and "<code>script</code>".<li><p><a href=#unsafely-set-html id=unsafe-html-parsing-methods:unsafely-set-html-2>Unsafely set HTML</a> given <a id=unsafe-html-parsing-methods:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, <a id=unsafe-html-parsing-methods:this-8 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=https://dom.spec.whatwg.org/#concept-documentfragment-host id=unsafe-html-parsing-methods:concept-documentfragment-host-2 data-x-internal=concept-documentfragment-host>shadow host</a>, and <var>compliantHTML</var>.</ol>

  <p>To <dfn id=unsafely-set-html>unsafely set HTML</dfn>, given an <code id=unsafe-html-parsing-methods:element-2><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> or <code id=unsafe-html-parsing-methods:documentfragment><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code>
  <var>target</var>, an <code id=unsafe-html-parsing-methods:element-3><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> <var>contextElement</var>, and a <a id=unsafe-html-parsing-methods:string href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a>
  <var>html</var>:</p>

  <ol><li><p>Let <var>newChildren</var> be the result of the <a id=unsafe-html-parsing-methods:html-fragment-parsing-algorithm href=parsing.html#html-fragment-parsing-algorithm>HTML fragment parsing
   algorithm</a> given <var>contextElement</var>, <var>html</var>, and true.<li><p>Let <var>fragment</var> be a new <code id=unsafe-html-parsing-methods:documentfragment-2><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code> whose <a id=unsafe-html-parsing-methods:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
   document</a> is <var>contextElement</var>'s <a id=unsafe-html-parsing-methods:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>For each <var>node</var> in <var>newChildren</var>, <a href=https://dom.spec.whatwg.org/#concept-node-append id=unsafe-html-parsing-methods:concept-node-append data-x-internal=concept-node-append>append</a> <var>node</var> to <var>fragment</var>.<li><p><a href=https://dom.spec.whatwg.org/#concept-node-replace-all id=unsafe-html-parsing-methods:concept-node-replace-all data-x-internal=concept-node-replace-all>Replace all</a> with <var>fragment</var> within
   <var>target</var>.</ol>

  <hr>

  <p>The static <dfn data-dfn-for=Document id=dom-parsehtmlunsafe data-dfn-type=method><code>parseHTMLUnsafe(<var>html</var>)</code></dfn> method steps are:</p>

  <ol><li><p>Let <var>compliantHTML</var> be the result of invoking the <a href=https://w3c.github.io/trusted-types/dist/spec/#get-trusted-type-compliant-string-algorithm id=unsafe-html-parsing-methods:tt-getcompliantstring-3 data-x-internal=tt-getcompliantstring>Get Trusted Type compliant string</a> algorithm with <code id=unsafe-html-parsing-methods:tt-trustedhtml-3><a data-x-internal=tt-trustedhtml href=https://w3c.github.io/trusted-types/dist/spec/#trustedhtml>TrustedHTML</a></code>, <a id=unsafe-html-parsing-methods:this-9 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=unsafe-html-parsing-methods:concept-relevant-global-3 href=webappapis.html#concept-relevant-global>relevant global
   object</a>, <var>html</var>, "<code>Document parseHTMLUnsafe</code>", and "<code>script</code>".<li>
    <p>Let <var>document</var> be a new <code id=unsafe-html-parsing-methods:document-2><a href=dom.html#document>Document</a></code>, whose <a href=https://dom.spec.whatwg.org/#concept-document-content-type id=unsafe-html-parsing-methods:concept-document-content-type data-x-internal=concept-document-content-type>content type</a> is "<code>text/html</code>".</p>

    <p class=note>Since <var>document</var> does not have a <a href=document-sequences.html#concept-document-bc id=unsafe-html-parsing-methods:concept-document-bc>browsing context</a>, <a href=webappapis.html#concept-n-script id=unsafe-html-parsing-methods:concept-n-script>scripting
    is disabled</a>.</p>
   <li><p>Set <var>document</var>'s <a href=https://dom.spec.whatwg.org/#concept-document-allow-declarative-shadow-roots id=unsafe-html-parsing-methods:concept-document-allow-declarative-shadow-roots data-x-internal=concept-document-allow-declarative-shadow-roots>allow declarative shadow roots</a> to
   true.<li><p><a href=#parse-html-from-a-string id=unsafe-html-parsing-methods:parse-html-from-a-string>Parse HTML from a string</a> given <var>document</var> and
   <var>compliantHTML</var>.<li><p>Return <var>document</var>.</ol>

  

  <h4 id=html-serialization-methods><span class=secno>8.5.3</span> HTML serialization methods<a href=#html-serialization-methods class=self-link></a></h4>

  <dl class=domintro><dt><code><var>html</var> = <var>element</var>.<a href=#dom-element-gethtml id=dom-element-gethtml-dev>getHTML</a>({ <a href=#dom-gethtmloptions-serializableshadowroots id=html-serialization-methods:dom-gethtmloptions-serializableshadowroots>serializableShadowRoots</a>, <a href=#dom-gethtmloptions-shadowroots id=html-serialization-methods:dom-gethtmloptions-shadowroots>shadowRoots</a> })</code><dd>
    <p>Returns the result of serializing <var>element</var> to HTML. <a href=https://dom.spec.whatwg.org/#concept-shadow-root id=html-serialization-methods:shadow-root data-x-internal=shadow-root>Shadow roots</a> within <var>element</var> are serialized according to the provided options:</p>

    <ul><li><p>If <code id=html-serialization-methods:dom-gethtmloptions-serializableshadowroots-2><a href=#dom-gethtmloptions-serializableshadowroots>serializableShadowRoots</a></code> is true, then all shadow roots marked as <a href=https://dom.spec.whatwg.org/#shadowroot-serializable id=html-serialization-methods:shadow-serializable data-x-internal=shadow-serializable>serializable</a> are serialized.<li><p>If the <code id=html-serialization-methods:dom-gethtmloptions-shadowroots-2><a href=#dom-gethtmloptions-shadowroots>shadowRoots</a></code> array is provided, then all shadow roots specified in the array are serialized, regardless of whether or not they are marked as serializable.</ul>

    <p>If neither option is provided, then no shadow roots are serialized.</p>
   <dt><code><var>html</var> = <var>shadowRoot</var>.<a href=#dom-shadowroot-gethtml id=dom-shadowroot-gethtml-dev>getHTML</a>({ <a href=#dom-gethtmloptions-serializableshadowroots id=html-serialization-methods:dom-gethtmloptions-serializableshadowroots-3>serializableShadowRoots</a>, <a href=#dom-gethtmloptions-shadowroots id=html-serialization-methods:dom-gethtmloptions-shadowroots-3>shadowRoots</a> })</code><dd>
    <p>Returns the result of serializing <var>shadowRoot</var> to HTML, using its <a href=https://dom.spec.whatwg.org/#concept-documentfragment-host id=html-serialization-methods:concept-documentfragment-host data-x-internal=concept-documentfragment-host>shadow host</a> as the context element. <a href=https://dom.spec.whatwg.org/#concept-shadow-root id=html-serialization-methods:shadow-root-2 data-x-internal=shadow-root>Shadow roots</a> within <var>shadowRoot</var> are serialized according to the provided options, as above.</p>
   </dl>

  

  <p><code id=html-serialization-methods:element><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code>'s <dfn data-dfn-for=Element id=dom-element-gethtml data-dfn-type=method><code>getHTML(<var>options</var>)</code></dfn> method steps
  are to return the result of <a id=html-serialization-methods:html-fragment-serialisation-algorithm href=parsing.html#html-fragment-serialisation-algorithm>HTML fragment serialization algorithm</a> with
  <a id=html-serialization-methods:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, <var>options</var>["<code id=html-serialization-methods:dom-gethtmloptions-serializableshadowroots-4><a href=#dom-gethtmloptions-serializableshadowroots>serializableShadowRoots</a></code>"],
  and <var>options</var>["<code id=html-serialization-methods:dom-gethtmloptions-shadowroots-4><a href=#dom-gethtmloptions-shadowroots>shadowRoots</a></code>"].</p>

  <p><code id=html-serialization-methods:shadowroot><a data-x-internal=shadowroot href=https://dom.spec.whatwg.org/#interface-shadowroot>ShadowRoot</a></code>'s <dfn data-dfn-for=ShadowRoot id=dom-shadowroot-gethtml data-dfn-type=method><code>getHTML(<var>options</var>)</code></dfn> method steps
  are to return the result of <a id=html-serialization-methods:html-fragment-serialisation-algorithm-2 href=parsing.html#html-fragment-serialisation-algorithm>HTML fragment serialization algorithm</a> with
  <a id=html-serialization-methods:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, <var>options</var>["<code id=html-serialization-methods:dom-gethtmloptions-serializableshadowroots-5><a href=#dom-gethtmloptions-serializableshadowroots>serializableShadowRoots</a></code>"],
  and <var>options</var>["<code id=html-serialization-methods:dom-gethtmloptions-shadowroots-5><a href=#dom-gethtmloptions-shadowroots>shadowRoots</a></code>"].</p>

  

  <h4 id=the-innerhtml-property><span class=secno>8.5.4</span> The <code id=the-innerhtml-property:dom-element-innerhtml><a href=#dom-element-innerhtml>innerHTML</a></code> property<a href=#the-innerhtml-property class=self-link></a></h4>

  <p class=XXX>The <code id=the-innerhtml-property:dom-element-innerhtml-2><a href=#dom-element-innerhtml>innerHTML</a></code> property has a number of outstanding issues
  in the <cite>DOM Parsing and Serialization</cite> <a href=https://github.com/w3c/DOM-Parsing/issues>issue
  tracker</a>, documenting various problems with its specification.</p>

  <dl class=domintro><dt><code><var>element</var>.<a href=#dom-element-innerhtml id=dom-element-innerhtml-dev>innerHTML</a></code><dd>
    <p>Returns a fragment of HTML or XML that represents the element's contents.</p>

    <p>In the case of an XML document, throws an <a id=the-innerhtml-property:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a>
    <code id=the-innerhtml-property:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the element cannot be serialized to XML.</p>
   <dt><code><var>element</var>.<a href=#dom-element-innerhtml id=the-innerhtml-property:dom-element-innerhtml-3>innerHTML</a> = <var>value</var></code><dd>
    <p>Replaces the contents of the element with nodes parsed from the given string.</p>

    <p>In the case of an XML document, throws a <a id=the-innerhtml-property:syntaxerror href=https://webidl.spec.whatwg.org/#syntaxerror data-x-internal=syntaxerror>"<code>SyntaxError</code>"</a>
    <code id=the-innerhtml-property:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the given string is not well-formed.</p>
   <dt><code><var>shadowRoot</var>.<a href=#dom-shadowroot-innerhtml id=dom-shadowroot-innerhtml-dev>innerHTML</a></code><dd>
    <p>Returns a fragment of HTML that represents the shadow roots's contents.</p>
   <dt><code><var>shadowRoot</var>.<a href=#dom-shadowroot-innerhtml id=the-innerhtml-property:dom-shadowroot-innerhtml>innerHTML</a> = <var>value</var></code><dd>
    <p>Replaces the contents of the shadow root with nodes parsed from the given string.</p>
   </dl>

  <p class=warning>These properties' setters perform no sanitization to remove
  potentially-dangerous elements and attributes like <code id=the-innerhtml-property:the-script-element><a href=scripting.html#the-script-element>script</a></code> or <a id=the-innerhtml-property:event-handler-content-attributes href=webappapis.html#event-handler-content-attributes>event handler
  content attributes</a>.</p>

  

  <p>The <dfn id=fragment-serializing-algorithm-steps data-export="">fragment serializing algorithm steps</dfn>, given an <code id=the-innerhtml-property:element><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code>,
  <code id=the-innerhtml-property:document><a href=dom.html#document>Document</a></code>, or <code id=the-innerhtml-property:documentfragment><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code> <var>node</var> and a boolean <var>require
  well-formed</var>, are:</p>

  <ol><li><p>Let <var>context document</var> be <var>node</var>'s <a id=the-innerhtml-property:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If <var>context document</var> is an <a href=https://dom.spec.whatwg.org/#html-document id=the-innerhtml-property:html-documents data-x-internal=html-documents>HTML document</a>,
    return the result of <a id=the-innerhtml-property:html-fragment-serialisation-algorithm href=parsing.html#html-fragment-serialisation-algorithm>HTML fragment serialization algorithm</a> with <var>node</var>,
    false, and « ».<li><p>Return the <a href=https://w3c.github.io/DOM-Parsing/#dfn-xml-serialization id=the-innerhtml-property:xml-serialization data-x-internal=xml-serialization>XML serialization</a> of <var>node</var>
    given <var>require well-formed</var>.</ol>

  <p>The <dfn id=fragment-parsing-algorithm-steps data-export="">fragment parsing algorithm steps</dfn>, given an <code id=the-innerhtml-property:element-2><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code>
  <var>context</var> and a string <var>markup</var>, are:</p>

  <ol><li><p>Let <var>algorithm</var> be the <a id=the-innerhtml-property:html-fragment-parsing-algorithm href=parsing.html#html-fragment-parsing-algorithm>HTML fragment parsing algorithm</a>.<li><p>If <var>context</var>'s <a id=the-innerhtml-property:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is an <a href=https://dom.spec.whatwg.org/#xml-document id=the-innerhtml-property:xml-documents data-x-internal=xml-documents>XML
   document</a>, then set <var>algorithm</var> to the <a id=the-innerhtml-property:xml-fragment-parsing-algorithm href=xhtml.html#xml-fragment-parsing-algorithm>XML fragment parsing
   algorithm</a>.<li><p>Let <var>newChildren</var> be the result of invoking <var>algorithm</var> given
   <var>context</var> and <var>markup</var>.<li><p>Let <var>fragment</var> be a new <code id=the-innerhtml-property:documentfragment-2><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code> whose <a id=the-innerhtml-property:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
   document</a> is <var>context</var>'s <a id=the-innerhtml-property:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li>
    <p>For each <var>node</var> of <var>newChildren</var>, in <a id=the-innerhtml-property:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>: <a href=https://dom.spec.whatwg.org/#concept-node-append id=the-innerhtml-property:concept-node-append data-x-internal=concept-node-append>append</a> <var>node</var> to <var>fragment</var>.</p>

    <p class=note>This ensures the <a id=the-innerhtml-property:node-document-5 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> for the new <a href=https://dom.spec.whatwg.org/#interface-node id=the-innerhtml-property:node data-x-internal=node>nodes</a> is correct.</p>
   <li><p>Return <var>fragment</var>.</ol>

  <p><code id=the-innerhtml-property:element-3><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code>'s <dfn data-dfn-for=Element id=dom-element-innerhtml data-dfn-type=attribute><code>innerHTML</code></dfn> getter steps are to return the result of
  running <a href=#fragment-serializing-algorithm-steps id=the-innerhtml-property:fragment-serializing-algorithm-steps>fragment serializing algorithm steps</a> with <a id=the-innerhtml-property:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> and true.</p>

  <p><code id=the-innerhtml-property:shadowroot><a data-x-internal=shadowroot href=https://dom.spec.whatwg.org/#interface-shadowroot>ShadowRoot</a></code>'s <dfn data-dfn-for=ShadowRoot id=dom-shadowroot-innerhtml data-dfn-type=attribute><code>innerHTML</code></dfn> getter steps are to return the result of
  running <a href=#fragment-serializing-algorithm-steps id=the-innerhtml-property:fragment-serializing-algorithm-steps-2>fragment serializing algorithm steps</a> with <a id=the-innerhtml-property:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> and true.</p>

  <p><code id=the-innerhtml-property:element-4><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code>'s <code id=the-innerhtml-property:dom-element-innerhtml-4><a href=#dom-element-innerhtml>innerHTML</a></code> setter steps
  are:</p>

  <ol><li><p>Let <var>compliantString</var> be the result of invoking the <a href=https://w3c.github.io/trusted-types/dist/spec/#get-trusted-type-compliant-string-algorithm id=the-innerhtml-property:tt-getcompliantstring data-x-internal=tt-getcompliantstring>Get Trusted Type compliant string</a> algorithm with <code id=the-innerhtml-property:tt-trustedhtml><a data-x-internal=tt-trustedhtml href=https://w3c.github.io/trusted-types/dist/spec/#trustedhtml>TrustedHTML</a></code>, <a id=the-innerhtml-property:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-innerhtml-property:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global
    object</a>, the given value, "<code>Element innerHTML</code>", and "<code>script</code>".<li><p>Let <var>context</var> be <a id=the-innerhtml-property:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.<li><p>Let <var>fragment</var> be the result of invoking the <a href=#fragment-parsing-algorithm-steps id=the-innerhtml-property:fragment-parsing-algorithm-steps>fragment parsing algorithm
    steps</a> with <var>context</var> and <var>compliantString</var>.<li>
     <p>If <var>context</var> is a <code id=the-innerhtml-property:the-template-element><a href=scripting.html#the-template-element>template</a></code> element, then set <var>context</var> to
     the <code id=the-innerhtml-property:the-template-element-2><a href=scripting.html#the-template-element>template</a></code> element's <a id=the-innerhtml-property:template-contents href=scripting.html#template-contents>template contents</a> (a
     <code id=the-innerhtml-property:documentfragment-3><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code>).</p>

     <p class=note>Setting <code id=the-innerhtml-property:dom-element-innerhtml-5><a href=#dom-element-innerhtml>innerHTML</a></code> on a
     <code id=the-innerhtml-property:the-template-element-3><a href=scripting.html#the-template-element>template</a></code> element will replace all the nodes in its <a id=the-innerhtml-property:template-contents-2 href=scripting.html#template-contents>template contents</a>
     rather than its <a href=https://dom.spec.whatwg.org/#concept-tree-child id=the-innerhtml-property:concept-tree-child data-x-internal=concept-tree-child>children</a>.</p>
    <li><p><a href=https://dom.spec.whatwg.org/#concept-node-replace-all id=the-innerhtml-property:concept-node-replace-all data-x-internal=concept-node-replace-all>Replace all</a> with <var>fragment</var>
    within <var>context</var>.</ol>

  <p><code id=the-innerhtml-property:shadowroot-2><a data-x-internal=shadowroot href=https://dom.spec.whatwg.org/#interface-shadowroot>ShadowRoot</a></code>'s <code id=the-innerhtml-property:dom-shadowroot-innerhtml-2><a href=#dom-shadowroot-innerhtml>innerHTML</a></code> setter
  steps are:</p>

  <ol><li><p>Let <var>compliantString</var> be the result of invoking the <a href=https://w3c.github.io/trusted-types/dist/spec/#get-trusted-type-compliant-string-algorithm id=the-innerhtml-property:tt-getcompliantstring-2 data-x-internal=tt-getcompliantstring>Get Trusted Type compliant string</a> algorithm with <code id=the-innerhtml-property:tt-trustedhtml-2><a data-x-internal=tt-trustedhtml href=https://w3c.github.io/trusted-types/dist/spec/#trustedhtml>TrustedHTML</a></code>, <a id=the-innerhtml-property:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-innerhtml-property:concept-relevant-global-2 href=webappapis.html#concept-relevant-global>relevant global
    object</a>, the given value, "<code>ShadowRoot innerHTML</code>", and "<code>script</code>".<li><p>Let <var>context</var> be <a id=the-innerhtml-property:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=https://dom.spec.whatwg.org/#concept-documentfragment-host id=the-innerhtml-property:concept-documentfragment-host data-x-internal=concept-documentfragment-host>host</a>.<li><p>Let <var>fragment</var> be the result of invoking the <a href=#fragment-parsing-algorithm-steps id=the-innerhtml-property:fragment-parsing-algorithm-steps-2>fragment parsing algorithm
    steps</a> with <var>context</var> and <var>compliantString</var>.<li><p><a href=https://dom.spec.whatwg.org/#concept-node-replace-all id=the-innerhtml-property:concept-node-replace-all-2 data-x-internal=concept-node-replace-all>Replace all</a> with <var>fragment</var>
    within <a id=the-innerhtml-property:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.</ol>

  

  <h4 id=the-outerhtml-property><span class=secno>8.5.5</span> The <code id=the-outerhtml-property:dom-element-outerhtml><a href=#dom-element-outerhtml>outerHTML</a></code> property<a href=#the-outerhtml-property class=self-link></a></h4>

  <p class=XXX>The <code id=the-outerhtml-property:dom-element-outerhtml-2><a href=#dom-element-outerhtml>outerHTML</a></code> property has a number of outstanding issues
  in the <cite>DOM Parsing and Serialization</cite> <a href=https://github.com/w3c/DOM-Parsing/issues>issue
  tracker</a>, documenting various problems with its specification.</p>

  <dl class=domintro><dt><code><var>element</var>.<a href=#dom-element-outerhtml id=dom-element-outerhtml-dev>outerHTML</a></code><dd>
    <p>Returns a fragment of HTML or XML that represents the element and its contents.</p>

    <p>In the case of an XML document, throws an <a id=the-outerhtml-property:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a>
    <code id=the-outerhtml-property:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the element cannot be serialized to XML.</p>
   <dt><code><var>element</var>.<a href=#dom-element-outerhtml id=the-outerhtml-property:dom-element-outerhtml-3>outerHTML</a> = <var>value</var></code><dd>
    <p>Replaces the element with nodes parsed from the given string.</p>

    <p>In the case of an XML document, throws a <a id=the-outerhtml-property:syntaxerror href=https://webidl.spec.whatwg.org/#syntaxerror data-x-internal=syntaxerror>"<code>SyntaxError</code>"</a>
    <code id=the-outerhtml-property:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the given string is not well-formed.</p>

    <p>Throws a <a id=the-outerhtml-property:nomodificationallowederror href=https://webidl.spec.whatwg.org/#nomodificationallowederror data-x-internal=nomodificationallowederror>"<code>NoModificationAllowedError</code>"</a> <code id=the-outerhtml-property:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if
    the parent of the element is a <a id=the-outerhtml-property:document href=dom.html#document><code>Document</code></a>.</p>
   </dl>

  <p class=warning>This property's setter performs no sanitization to remove potentially-dangerous
  elements and attributes like <code id=the-outerhtml-property:the-script-element><a href=scripting.html#the-script-element>script</a></code> or <a id=the-outerhtml-property:event-handler-content-attributes href=webappapis.html#event-handler-content-attributes>event handler content
  attributes</a>.</p>

  

  <p><code id=the-outerhtml-property:element><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code>'s <dfn data-dfn-for=Element id=dom-element-outerhtml data-dfn-type=attribute><code>outerHTML</code></dfn> getter steps are:</p>

  <ol><li><p>Let <var>element</var> be a fictional node whose only child is <a id=the-outerhtml-property:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.<li><p>Return the result of running <a href=#fragment-serializing-algorithm-steps id=the-outerhtml-property:fragment-serializing-algorithm-steps>fragment serializing algorithm steps</a> with
   <var>element</var> and true.
  </ol>

  <p><code id=the-outerhtml-property:element-2><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code>'s <code id=the-outerhtml-property:dom-element-outerhtml-4><a href=#dom-element-outerhtml>outerHTML</a></code> setter steps
  are:</p>

  <ol><li><p>Let <var>compliantString</var> be the result of invoking the <a href=https://w3c.github.io/trusted-types/dist/spec/#get-trusted-type-compliant-string-algorithm id=the-outerhtml-property:tt-getcompliantstring data-x-internal=tt-getcompliantstring>Get Trusted Type compliant string</a> algorithm with <code id=the-outerhtml-property:tt-trustedhtml><a data-x-internal=tt-trustedhtml href=https://w3c.github.io/trusted-types/dist/spec/#trustedhtml>TrustedHTML</a></code>, <a id=the-outerhtml-property:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-outerhtml-property:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global
    object</a>, the given value, "<code>Element outerHTML</code>", and "<code>script</code>".<li><p>Let <var>parent</var> be <a id=the-outerhtml-property:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-outerhtml-property:parent href=https://dom.spec.whatwg.org/#concept-tree-parent data-x-internal=parent>parent</a>.<li><p>If <var>parent</var> is null, return. There would be no way to obtain a
    reference to the nodes created even if the remaining steps were run.<li><p>If <var>parent</var> is a <code id=the-outerhtml-property:document-2><a href=dom.html#document>Document</a></code>, throw a
    <a id=the-outerhtml-property:nomodificationallowederror-2 href=https://webidl.spec.whatwg.org/#nomodificationallowederror data-x-internal=nomodificationallowederror>"<code>NoModificationAllowedError</code>"</a> <code id=the-outerhtml-property:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>If <var>parent</var> is a <code id=the-outerhtml-property:documentfragment><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code>, set <var>parent</var> to the
    result of <a href=https://dom.spec.whatwg.org/#concept-create-element id=the-outerhtml-property:create-an-element data-x-internal=create-an-element>creating an element</a> given <a id=the-outerhtml-property:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
    <a id=the-outerhtml-property:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, "<code>body</code>", and the <a id=the-outerhtml-property:html-namespace-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML
    namespace</a>.<li><p>Let <var>fragment</var> be the result of invoking the <a href=#fragment-parsing-algorithm-steps id=the-outerhtml-property:fragment-parsing-algorithm-steps>fragment parsing algorithm
    steps</a> given <var>parent</var> and <var>compliantString</var>.<li><p><a href=https://dom.spec.whatwg.org/#concept-node-replace id=the-outerhtml-property:concept-node-replace data-x-internal=concept-node-replace>Replace</a> <a id=the-outerhtml-property:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> with
    <var>fragment</var> within <a id=the-outerhtml-property:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-outerhtml-property:parent-2 href=https://dom.spec.whatwg.org/#concept-tree-parent data-x-internal=parent>parent</a>.</ol>

  

  <h4 id=the-insertadjacenthtml()-method><span class=secno>8.5.6</span> The <code id=the-insertadjacenthtml()-method:dom-element-insertadjacenthtml><a href=#dom-element-insertadjacenthtml>insertAdjacentHTML()</a></code> method<a href=#the-insertadjacenthtml()-method class=self-link></a></h4>

  <p class=XXX>The <code id=the-insertadjacenthtml()-method:dom-element-insertadjacenthtml-2><a href=#dom-element-insertadjacenthtml>insertAdjacentHTML()</a></code>
  method has a number of outstanding issues in the <cite>DOM Parsing and Serialization</cite> <a href=https://github.com/w3c/DOM-Parsing/issues>issue tracker</a>, documenting various problems
  with its specification.</p>

  <dl class=domintro><dt><code><var>element</var>.<a href=#dom-element-insertadjacenthtml id=dom-element-insertadjacenthtml-dev>insertAdjacentHTML</a>(<var>position</var>, <var>string</var>)</code><dd>
    <p>Parses <var>string</var> as HTML or XML and inserts the resulting nodes into the tree in
    the position given by the <var>position</var> argument, as follows:</p>

    <dl><dt>"<code>beforebegin</code>"<dd>Before the element itself (i.e., after <var>element</var>'s previous sibling)<dt>"<code>afterbegin</code>"<dd>Just inside the element, before its first child.<dt>"<code>beforeend</code>"<dd>Just inside the element, after its last child.<dt>"<code>afterend</code>"<dd>After the element itself (i.e., before <var>element</var>'s next sibling)</dl>

    <p>Throws a <a id=the-insertadjacenthtml()-method:syntaxerror href=https://webidl.spec.whatwg.org/#syntaxerror data-x-internal=syntaxerror>"<code>SyntaxError</code>"</a> <code id=the-insertadjacenthtml()-method:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the arguments
    have invalid values (e.g., in the case of an <a href=https://dom.spec.whatwg.org/#xml-document id=the-insertadjacenthtml()-method:xml-documents data-x-internal=xml-documents>XML document</a>,
    if the given string is not well-formed).</p>

    <p>Throws a <a id=the-insertadjacenthtml()-method:nomodificationallowederror href=https://webidl.spec.whatwg.org/#nomodificationallowederror data-x-internal=nomodificationallowederror>"<code>NoModificationAllowedError</code>"</a> <code id=the-insertadjacenthtml()-method:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>
    if the given position isn't possible (e.g. inserting elements after the root element of a
    <code id=the-insertadjacenthtml()-method:document><a href=dom.html#document>Document</a></code>).</p>
   </dl>

  <p class=warning>This method performs no sanitization to remove potentially-dangerous elements
  and attributes like <code id=the-insertadjacenthtml()-method:the-script-element><a href=scripting.html#the-script-element>script</a></code> or <a id=the-insertadjacenthtml()-method:event-handler-content-attributes href=webappapis.html#event-handler-content-attributes>event handler content attributes</a>.</p>

  

  <p><code id=the-insertadjacenthtml()-method:element><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code>'s <dfn data-dfn-for=Element id=dom-element-insertadjacenthtml data-dfn-type=method><code>insertAdjacentHTML(<var>position</var>,
  <var>string</var>)</code></dfn> method steps are:</p>

  <ol><li><p>Let <var>compliantString</var> be the result of invoking the <a href=https://w3c.github.io/trusted-types/dist/spec/#get-trusted-type-compliant-string-algorithm id=the-insertadjacenthtml()-method:tt-getcompliantstring data-x-internal=tt-getcompliantstring>Get Trusted Type compliant string</a> algorithm with <code id=the-insertadjacenthtml()-method:tt-trustedhtml><a data-x-internal=tt-trustedhtml href=https://w3c.github.io/trusted-types/dist/spec/#trustedhtml>TrustedHTML</a></code>, <a id=the-insertadjacenthtml()-method:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-insertadjacenthtml()-method:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global
   object</a>, <var>string</var>, "<code>Element insertAdjacentHTML</code>", and "<code>script</code>".<li><p>Let <var>context</var> be null.<li><p>Use the first matching item from this list:</p>
    <dl class=switch><dt>If <var>position</var> is an <a id=the-insertadjacenthtml()-method:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>beforebegin</code>"<dt>If <var>position</var> is an <a id=the-insertadjacenthtml()-method:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>afterend</code>"<dd>
      <ol><li><p>Set <var>context</var> to <a id=the-insertadjacenthtml()-method:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=nav-history-apis.html#dom-parent id=the-insertadjacenthtml()-method:dom-parent>parent</a>.<li><p>If <var>context</var> is null or a <code id=the-insertadjacenthtml()-method:document-2><a href=dom.html#document>Document</a></code>, throw a
       <a id=the-insertadjacenthtml()-method:nomodificationallowederror-2 href=https://webidl.spec.whatwg.org/#nomodificationallowederror data-x-internal=nomodificationallowederror>"<code>NoModificationAllowedError</code>"</a> <code id=the-insertadjacenthtml()-method:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</ol>
     <dt>If <var>position</var> is an <a id=the-insertadjacenthtml()-method:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>afterbegin</code>"<dt>If <var>position</var> is an <a id=the-insertadjacenthtml()-method:ascii-case-insensitive-4 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>beforeend</code>"<dd>Set <var>context</var> to <a id=the-insertadjacenthtml()-method:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.<dt>Otherwise<dd><p>Throw a <a id=the-insertadjacenthtml()-method:syntaxerror-2 href=https://webidl.spec.whatwg.org/#syntaxerror data-x-internal=syntaxerror>"<code>SyntaxError</code>"</a> <code id=the-insertadjacenthtml()-method:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</dl>
   <li>
    <p>If <var>context</var> is not an <code id=the-insertadjacenthtml()-method:element-2><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> or all of the following are true:</p>

    <ul><li><p><var>context</var>'s <a id=the-insertadjacenthtml()-method:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is an HTML document;<li><p><var>context</var>'s <a href=https://dom.spec.whatwg.org/#concept-element-local-name id=the-insertadjacenthtml()-method:concept-element-local-name data-x-internal=concept-element-local-name>local name</a> is
     "<code id=the-insertadjacenthtml()-method:the-html-element><a href=semantics.html#the-html-element>html</a></code>"; and<li><p><var>context</var>'s <a href=https://dom.spec.whatwg.org/#concept-element-namespace id=the-insertadjacenthtml()-method:concept-element-namespace data-x-internal=concept-element-namespace>namespace</a> is the
     <a id=the-insertadjacenthtml()-method:html-namespace-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a>,</ul>

    <p>then set <var>context</var> to the result of <a href=https://dom.spec.whatwg.org/#concept-create-element id=the-insertadjacenthtml()-method:create-an-element data-x-internal=create-an-element>creating an
    element</a> given <a id=the-insertadjacenthtml()-method:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-insertadjacenthtml()-method:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, "<code>body</code>", and the <a id=the-insertadjacenthtml()-method:html-namespace-2-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a>.</p>
   <li>
    <p>Let <var>fragment</var> be the result of invoking the <a href=#fragment-parsing-algorithm-steps id=the-insertadjacenthtml()-method:fragment-parsing-algorithm-steps>fragment parsing algorithm
    steps</a> with <var>context</var> and <var>compliantString</var>.</p>
   <li>Use the first matching item from this list:
    <dl class=switch><dt>If <var>position</var> is an <a id=the-insertadjacenthtml()-method:ascii-case-insensitive-5 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>beforebegin</code>"<dd>
      <p><a href=https://dom.spec.whatwg.org/#concept-node-insert id=the-insertadjacenthtml()-method:concept-node-insert data-x-internal=concept-node-insert>Insert</a> <var>fragment</var> into
      <a id=the-insertadjacenthtml()-method:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=nav-history-apis.html#dom-parent id=the-insertadjacenthtml()-method:dom-parent-2>parent</a> before <a id=the-insertadjacenthtml()-method:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.</p>
     <dt>If <var>position</var> is an <a id=the-insertadjacenthtml()-method:ascii-case-insensitive-6 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>afterbegin</code>"<dd>
      <p><a href=https://dom.spec.whatwg.org/#concept-node-insert id=the-insertadjacenthtml()-method:concept-node-insert-2 data-x-internal=concept-node-insert>Insert</a> <var>fragment</var> into
      <a id=the-insertadjacenthtml()-method:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> before its <a id=the-insertadjacenthtml()-method:first-child href=https://dom.spec.whatwg.org/#concept-tree-first-child data-x-internal=first-child>first child</a>.</p>
     <dt>If <var>position</var> is an <a id=the-insertadjacenthtml()-method:ascii-case-insensitive-7 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>beforeend</code>"<dd>
      <p><a href=https://dom.spec.whatwg.org/#concept-node-append id=the-insertadjacenthtml()-method:concept-node-append data-x-internal=concept-node-append>Append</a> <var>fragment</var> to
      <a id=the-insertadjacenthtml()-method:this-8 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.</p>
     <dt>If <var>position</var> is an <a id=the-insertadjacenthtml()-method:ascii-case-insensitive-8 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>afterend</code>"<dd>
      <p><a href=https://dom.spec.whatwg.org/#concept-node-insert id=the-insertadjacenthtml()-method:concept-node-insert-3 data-x-internal=concept-node-insert>Insert</a> <var>fragment</var> into
      <a id=the-insertadjacenthtml()-method:this-9 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=nav-history-apis.html#dom-parent id=the-insertadjacenthtml()-method:dom-parent-3>parent</a> before <a id=the-insertadjacenthtml()-method:this-10 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
      <a id=the-insertadjacenthtml()-method:next-sibling href=https://dom.spec.whatwg.org/#concept-tree-next-sibling data-x-internal=next-sibling>next sibling</a>.</p>
     </dl>
   </ol>

  <p class=note>As with other direct <code id=the-insertadjacenthtml()-method:node><a data-x-internal=node href=https://dom.spec.whatwg.org/#interface-node>Node</a></code>-manipulation APIs (and unlike <code id=the-insertadjacenthtml()-method:dom-element-innerhtml><a href=#dom-element-innerhtml>innerHTML</a></code>), <code id=the-insertadjacenthtml()-method:dom-element-insertadjacenthtml-3><a href=#dom-element-insertadjacenthtml>insertAdjacentHTML()</a></code> does not include any special
  handling for <code id=the-insertadjacenthtml()-method:the-template-element><a href=scripting.html#the-template-element>template</a></code> elements. In most cases you will want to use <code>templateEl.<a href=scripting.html#dom-template-content id=the-insertadjacenthtml()-method:dom-template-content>content</a>.<a href=#dom-element-insertadjacenthtml id=the-insertadjacenthtml()-method:dom-element-insertadjacenthtml-4>insertAdjacentHTML()</a></code> instead of directly
  manipulating the child nodes of a <code id=the-insertadjacenthtml()-method:the-template-element-2><a href=scripting.html#the-template-element>template</a></code> element.</p>

  

  <h4 id=the-createcontextualfragment()-method><span class=secno>8.5.7</span> The <code id=the-createcontextualfragment()-method:dom-range-createcontextualfragment><a href=#dom-range-createcontextualfragment>createContextualFragment()</a></code>
  method<a href=#the-createcontextualfragment()-method class=self-link></a></h4>

  <p class=XXX>The <code id=the-createcontextualfragment()-method:dom-range-createcontextualfragment-2><a href=#dom-range-createcontextualfragment>createContextualFragment()</a></code> method has a number
  of outstanding issues in the <cite>DOM Parsing and Serialization</cite> <a href=https://github.com/w3c/DOM-Parsing/issues>issue tracker</a>, documenting various problems
  with its specification.</p>

  <dl class=domintro><dt><code><var>docFragment</var> = <var>range</var>.<a href=#dom-range-createcontextualfragment id=dom-range-createcontextualfragment-dev>createContextualFragment</a>(<var>string</var>)</code><dd>
    <p>Returns a <code id=the-createcontextualfragment()-method:documentfragment><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code> created from the markup string <var>string</var> using
    <var>range</var>'s <a href=https://dom.spec.whatwg.org/#concept-range-start-node id=the-createcontextualfragment()-method:concept-range-start-node data-x-internal=concept-range-start-node>start node</a> as the context in
    which <var>fragment</var> is parsed.</p>
   </dl>

  <p class=warning>This method performs no sanitization to remove potentially-dangerous elements
  and attributes like <code id=the-createcontextualfragment()-method:the-script-element><a href=scripting.html#the-script-element>script</a></code> or <a id=the-createcontextualfragment()-method:event-handler-content-attributes href=webappapis.html#event-handler-content-attributes>event handler content attributes</a>.</p>

  <pre><code class='idl'><c- b>partial</c-> <c- b>interface</c-> <a id='Range-partial' href='https://dom.spec.whatwg.org/#interface-range' data-x-internal='range'><c- g>Range</c-></a> {
  [<a id='the-createcontextualfragment()-method:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <c- g>NewObject</c->] <code id='the-createcontextualfragment()-method:documentfragment-2'><a data-x-internal='documentfragment' href='https://dom.spec.whatwg.org/#interface-documentfragment'><c- n>DocumentFragment</c-></a></code> <a href='#dom-range-createcontextualfragment' id='the-createcontextualfragment()-method:dom-range-createcontextualfragment-3'><c- g>createContextualFragment</c-></a>((<code id='the-createcontextualfragment()-method:tt-trustedhtml'><a data-x-internal='tt-trustedhtml' href='https://w3c.github.io/trusted-types/dist/spec/#trustedhtml'><c- n>TrustedHTML</c-></a></code> <c- b>or</c-> <c- b>DOMString</c->) <c- g>string</c->);
};</code></pre>

  

  <p><code id=the-createcontextualfragment()-method:range><a data-x-internal=range href=https://dom.spec.whatwg.org/#interface-range>Range</a></code>'s <dfn data-dfn-for=Range id=dom-range-createcontextualfragment data-dfn-type=method><code>createContextualFragment(<var>string</var>)</code></dfn>
  method steps are:</p>

  <ol><li><p>Let <var>compliantString</var> be the result of invoking the <a href=https://w3c.github.io/trusted-types/dist/spec/#get-trusted-type-compliant-string-algorithm id=the-createcontextualfragment()-method:tt-getcompliantstring data-x-internal=tt-getcompliantstring>Get
   Trusted Type compliant string</a> algorithm with <code id=the-createcontextualfragment()-method:tt-trustedhtml-2><a data-x-internal=tt-trustedhtml href=https://w3c.github.io/trusted-types/dist/spec/#trustedhtml>TrustedHTML</a></code>, <a id=the-createcontextualfragment()-method:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-createcontextualfragment()-method:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global
   object</a>, <var>string</var>, "<code>Range createContextualFragment</code>", and
   "<code>script</code>".<li><p>Let <var>node</var> be <a id=the-createcontextualfragment()-method:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=https://dom.spec.whatwg.org/#concept-range-start-node id=the-createcontextualfragment()-method:concept-range-start-node-2 data-x-internal=concept-range-start-node>start
   node</a>.<li><p>Let <var>element</var> be null.<li><p>If <var>node</var> <a id=the-createcontextualfragment()-method:implements href=https://webidl.spec.whatwg.org/#implements data-x-internal=implements>implements</a> <code id=the-createcontextualfragment()-method:element><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code>, set <var>element</var>
   to <var>node</var>.<li><p>Otherwise, if <var>node</var> <a id=the-createcontextualfragment()-method:implements-2 href=https://webidl.spec.whatwg.org/#implements data-x-internal=implements>implements</a> <code id=the-createcontextualfragment()-method:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> or
   <code id=the-createcontextualfragment()-method:comment-2><a data-x-internal=comment-2 href=https://dom.spec.whatwg.org/#interface-comment>Comment</a></code>, set <var>element</var> to <var>node</var>'s <a id=the-createcontextualfragment()-method:parent-element href=https://dom.spec.whatwg.org/#parent-element data-x-internal=parent-element>parent
   element</a>.<li>
    <p>If <var>element</var> is null or all of the following are true:</p>

    <ul><li><p><var>element</var>'s <a id=the-createcontextualfragment()-method:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is an HTML document;<li><p><var>element</var>'s <a href=https://dom.spec.whatwg.org/#concept-element-local-name id=the-createcontextualfragment()-method:concept-element-local-name data-x-internal=concept-element-local-name>local name</a> is
     "<code id=the-createcontextualfragment()-method:the-html-element><a href=semantics.html#the-html-element>html</a></code>"; and<li><p><var>element</var>'s <a href=https://dom.spec.whatwg.org/#concept-element-namespace id=the-createcontextualfragment()-method:concept-element-namespace data-x-internal=concept-element-namespace>namespace</a> is the
     <a id=the-createcontextualfragment()-method:html-namespace-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a>,</ul>

    <p>then set <var>element</var> to the result of <a href=https://dom.spec.whatwg.org/#concept-create-element id=the-createcontextualfragment()-method:create-an-element data-x-internal=create-an-element>creating an
    element</a> given <a id=the-createcontextualfragment()-method:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-createcontextualfragment()-method:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, "<code>body</code>", and the <a id=the-createcontextualfragment()-method:html-namespace-2-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a>.</p>
   <li><p>Let <var>fragment node</var> be the result of invoking the <a href=#fragment-parsing-algorithm-steps id=the-createcontextualfragment()-method:fragment-parsing-algorithm-steps>fragment parsing
   algorithm steps</a> with <var>element</var> and <var>compliantString</var>.<li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=the-createcontextualfragment()-method:list-iterate data-x-internal=list-iterate>For each</a> <var>script</var> of <var>fragment node</var>'s
    <code id=the-createcontextualfragment()-method:the-script-element-2><a href=scripting.html#the-script-element>script</a></code> element <a href=https://dom.spec.whatwg.org/#concept-tree-descendant id=the-createcontextualfragment()-method:concept-tree-descendant data-x-internal=concept-tree-descendant>descendants</a>:</p>

    <ol><li><p>Set <var>script</var>'s <a id=the-createcontextualfragment()-method:already-started href=scripting.html#already-started>already started</a> to false.<li><p>Set <var>script</var>'s <a id=the-createcontextualfragment()-method:parser-document href=scripting.html#parser-document>parser document</a> to null.</ol>
   <li><p>Return <var>fragment node</var>.</ol>

  

  <h4 id=the-xmlserializer-interface><span class=secno>8.5.8</span> The <code id=the-xmlserializer-interface:xmlserializer><a href=#xmlserializer>XMLSerializer</a></code> interface<a href=#the-xmlserializer-interface class=self-link></a></h4>

  <p class=XXX>The <code id=the-xmlserializer-interface:xmlserializer-2><a href=#xmlserializer>XMLSerializer</a></code> interface has a number of outstanding issues in the
  <cite>DOM Parsing and Serialization</cite> <a href=https://github.com/w3c/DOM-Parsing/issues>issue tracker</a>, documenting various problems
  with its specification. The remainder of <cite>DOM Parsing and Serialization</cite> will be
  gradually upstreamed to this specification.</p>

  <dl class=domintro><dt><code><var>xmlSerializer</var> = new <a href=#dom-xmlserializer-constructor id=dom-xmlserializer-constructor-dev>XMLSerializer</a>()</code><dd><p>Constructs a new <code id=the-xmlserializer-interface:xmlserializer-3><a href=#xmlserializer>XMLSerializer</a></code> object.<dt><code><var>string</var> = <var>xmlSerializer</var>.<a href=#dom-xmlserializer-serializetostring id=dom-xmlserializer-serializetostring-dev>serializeToString</a>(<var>root</var>)</code><dd>
    <p>Returns the result of serializing <var>root</var> to XML.</p>

    <p>Throws an <a id=the-xmlserializer-interface:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-xmlserializer-interface:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if
    <var>root</var> cannot be serialized to XML.</p>
   </dl>

  <p class=note>The design of <code id=the-xmlserializer-interface:xmlserializer-4><a href=#xmlserializer>XMLSerializer</a></code>, as a class that needs to be constructed
  and then have its <code id=the-xmlserializer-interface:dom-xmlserializer-serializetostring><a href=#dom-xmlserializer-serializetostring>serializeToString()</a></code>
  method called, is an unfortunate historical artifact. If we were designing this functionality
  today it would be a standalone function.</p>

  <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='xmlserializer' data-dfn-type='interface'><c- g>XMLSerializer</c-></dfn> {
  <a href='#dom-xmlserializer-constructor' id='the-xmlserializer-interface:dom-xmlserializer-constructor'><c- g>constructor</c-></a>();

  <c- b>DOMString</c-> <a href='#dom-xmlserializer-serializetostring' id='the-xmlserializer-interface:dom-xmlserializer-serializetostring-2'><c- g>serializeToString</c-></a>(<code id='the-xmlserializer-interface:node'><a data-x-internal='node' href='https://dom.spec.whatwg.org/#interface-node'><c- n>Node</c-></a></code> <c- g>root</c->);
};</code></pre>

  

  <p>The <dfn id=dom-xmlserializer-constructor><code>new XMLSerializer()</code></dfn>
  constructor steps are to do nothing.</p>

  <p>The <dfn data-dfn-for=XMLSerializer id=dom-xmlserializer-serializetostring data-dfn-type=method><code>serializeToString(<var>root</var>)</code></dfn>
  method steps are:</p>

  <ol><li><p>Return the <a href=https://w3c.github.io/DOM-Parsing/#dfn-xml-serialization id=the-xmlserializer-interface:xml-serialization data-x-internal=xml-serialization>XML serialization</a> of <var>root</var>
   given false.</ol>

  

  <nav><a href=webappapis.html>← 8 Web application APIs</a> — <a href=index.html>Table of Contents</a> — <a href=timers-and-user-prompts.html>8.6 Timers →</a></nav>
